我确实使用onPress“handler”呈现了以下类型的列表.
我已经意识到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.