时间戳

首页 > 解决方案 > 将 flatlist 组件键作为参数传递

react-native - 将 flatlist 组件键作为参数传递

问题描述

import {View,Text,StyleSheet,FlatList,TouchableOpacity,Dimensions,AsyncStorage} from 'react-native';
import {Font, LinearGradient} from "expo";
const data = [
  { key: 'Addition'  }, { key: 'B' }, { key: 'C'  },{ key: 'D'},
  { key: 'E'  },{ key: 'F'  }
];

const numColumns = 1;
export default class GScreen extends React.Component {
  renderItem = ({ item, index }) => {
    return (
      <LinearGradient
          colors={['#2c81af','#92ede8']}
          style={styles.contcontainer}
          >
          <TouchableOpacity
          onPress={(item) =>{this.props.navigation.navigate('AScreen', {content : 'Addition' });}}>
            <Text style={styles.title}>{item.key}</Text>
          </TouchableOpacity>
      </LinearGradient>
    );
  };

  render() {
    return (
      <FlatList
        data={data}
        style={styles.container}
        renderItem={this.renderItem}
        numColumns={numColumns}
      />
    );
  };
}

对于这个 flatlist 的每个组件，当我们导航到 AScreen 而不是“添加”（或任何单个值）时，我想将 {item.key} 作为参数传递。我该如何实现？

标签： react-nativereact-navigationreact-native-flatlist

解决方案

问题不在于对象的传递，而在于您如何onPress在您的TouchableOpacity

目前这就是你所拥有的：

<TouchableOpacity
  onPress={(item) =>{this.props.navigation.navigate('AScreen', {content : 'Addition' });}}>
  <Text style={styles.title}>{item.key}</Text>
</TouchableOpacity>

请注意，在您的onPress函数中，函数内部的(item) => {...}单词item正在覆盖您拥有的值 for item。这就是为什么你得到undefined. 您需要做的就是item从函数调用中删除该单词。

如果您将代码更改为以下内容，则它应该按预期传递值

<TouchableOpacity
  onPress={() =>{this.props.navigation.navigate('AScreen', {content : item.key });}}>
  <Text style={styles.title}>{item.key}</Text>
</TouchableOpacity>

请注意，onPress现在是() => {...}。这应该阻止值item被覆盖

推荐阅读