将平面列表组件键作为参数传递

Question

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}
      />
    );
  };
}

对于 thiis flatlist 的每个组件，我想在导航到 AScreen 时将 {item.key} 作为参数传递，而不是 'Addition'（或任何单个值）。我该如何实现这一点？

Answer 1

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

中构建 onPress 函数

目前您拥有的是：

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

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

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

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

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

将平面列表组件键作为参数传递

Passing flatlist component key as a parameter

react-native

react-navigation

react-native-flatlist