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

对于此平面清单的每个组件，我想在导航到AScreen而不是“ Addition”（或任何单个值）时将{item.key}作为参数传递。我如何实现这一目标？

Answer 1

问题不在于对象的传递，而在于您如何在onPress中构造TouchableOpacity函数

目前这是您拥有的：

<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的值被覆盖

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

1 个答案: