Передача ключа компонента flatlist в качестве параметра

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

Для каждого компонента этого плоского списка я хочу передать {item.key} в качестве параметра при переходе к AScreen вместо «Добавление» (или любое другое значение). Как я могу этого достичь?

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