获取平面列表中所选项的值.-- 反应原生

Question

我通过绑定数组实现了平面列表组件。 当我点击一个项目时.我必须获取项目名称或 ID。

 _renderList = ({ item }) => {
    return (
        <View style={styles.listContainer} onPress={this._selectedItem(item.text)}  >
            <Image style={styles.listImage} source={item.avatar} />
            <Text style={styles.listText} >{item.text}</Text>
            <Text style={styles.listVal} >{item.val}</Text>
            <Image style={styles.listImage}   source={require('../../resources/icons/MyAccount/arrowright.png')} />
        </View>
    );
}

<FlatList data={this.state.data} renderItem={this._renderList} />

Answer 1

考虑@SNT答案和本尼格尔评论。我已经添加了这个。回答，因为他们的两个建议都需要注意。

 _renderList = ({ item }) => {
    return (
     <TouchableWithoutFeedback onPress={(event)=>this._selectedItem(item.text)}>
        <View style={styles.listContainer}>
            <Image style={styles.listImage} source={item.avatar} />
            <Text style={styles.listText} >{item.text}</Text>
            <Text style={styles.listVal} >{item.val}</Text>
            <Image style={styles.listImage}   source={require('../../resources/icons/MyAccount/arrowright.png')} />
        </View>
     </TouchableWithoutFeedback>
    );
}

<FlatList data={this.state.data} renderItem={this._renderList} />

Answer 2

您可以使用TouchableOpacity、TouchableHighlitfor、TouchableWithoutFeedback onPress事件。 View不提供onPress道具。

 _renderList = ({ item }) => {
    return (
     <TouchableWithoutFeedback onPress={(item)=>this._selectedItem(item.text)}>
        <View style={styles.listContainer}>
            <Image style={styles.listImage} source={item.avatar} />
            <Text style={styles.listText} >{item.text}</Text>
            <Text style={styles.listVal} >{item.val}</Text>
            <Image style={styles.listImage}   source={require('../../resources/icons/MyAccount/arrowright.png')} />
        </View>
     </TouchableWithoutFeedback>
    );
}

<FlatList data={this.state.data} renderItem={this._renderList} />