我确实使用onPress“handler”呈现了以下类型的列表.
@H_301_24@
我建议你在构造函数中绑定该函数,如..
我已经意识到onPress处理程序是无用的,因为我无法获得按下的种族参考.我得到ref没有定义错误.
var races = Engine.possibleRaces; function racePressed(ref) { console.log("REF: " + ref); // is never called } var races = Engine.possibleRaces; var rowViews = []; for (var i = 0; i < races.length; i++) { rowViews.push( <Text ref={i} onPress={() => racePressed(ref)} // ref is not defined style={styles.raceText}>{races[i].text} </Text> ); } <View style={{width: Screen.width,flexDirection:'row',flexWrap: 'wrap',alignItems: "center"}}> {rowViews} </View>
我也尝试将i作为参数传递.它不起作用,因为它在迭代结束后具有值.基本上它有races.length值.
onPress={() => racePressed(i)} // Same as races.length
编辑:
我确实将问题隔离到以下程序.
'use strict'; import React,{ AppRegistry,Component,StyleSheet,Text,View } from 'react-native'; let texts = [{text: "Click wrapper text1"},{text: "Click wrapper text2"}]; class sandBox extends Component { rowPressed(ref,i) { console.log("rowPressed: " + ref + " " + i) } render() { var rows = []; for (var i = 0; i < texts.length; i++) { rows.push( <Text ref={i} onPress={() => this.rowPressed.bind(this,i)} style={styles.raceText}>{texts[i].text} </Text> ); } return ( <View style={styles.container}> <View> {rows} </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center' } }); AppRegistry.registerComponent('sandBox',() => sandBox);
[tid:com.facebook.React.JavaScript] Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `sandBox`. See https://fb.me/react-warning-keys for more information.
constructor(props){ super(props); //your codes .... this.rowPressed = this.rowPressed.bind(this); }
这会像你期望的那样绑定rowPressed函数的这个上下文,使你的代码正常工作.
另外,要删除警告消息,您应为每个< Text>提供唯一的键属性.元素,使用< Text key = {i} ....>在你的代码应该工作.