Блог

Главная - Вопросы по программированию - React Native Отправляет 2 значения при событии onPress, затем переходит на другой экран

React Native Отправляет 2 значения при событии onPress, затем переходит на другой экран

#react-native #react-native-flatlist

#react-native #react-native-flatlist

Вопрос:

Это мой файл JSON

 {
    "name": "Thịt bò",
    "noed": 5
},
{
    "name": "Thịt heo",
    "noed": 3
}

Я получаю их в Flatlist 

    <FlatList
      data={cats}
      keyExtractor={item => item.name}
      renderItem={({item})=>(
          <View>
              <Text style={styles.catsItem} onPress={() => this.changeTextInput(item.name)}>{item.name} {item.noed}</Text>
          </View>
      )}
/>

Но я хочу отправить 2 значения item.name и item.noed в TextInput, а затем отправить их на другой экран

 changeTextInput(item){
        this.setState({name: item});
    };

Но я не знаю, как отправить item.noed в TextInput и как отправить их на другой экран.
Я совсем новичок, поэтому, пожалуйста, помогите мне.

Комментарии:

1. Используете ли вы react-navigation ?

2.По сути, вы хотите сохранить входное значение, введенное пользователем, в состоянии компонента. Посмотрите на документацию: facebook.github.io/react-native/docs/textinput onChangeText={(text) => this.setState({text})} . Для отладки зарегистрируйте состояние в своем рендере, чтобы увидеть, действительно ли оно сохранено в вашем состоянии ` render() { console.log(this.state); return <Flatlist…. ` И, наконец, вы хотите передать это же состояние в качестве реквизита на ваш следующий экран. если вы используете react-navigation из expo, подойдет что-то вроде этого: this.props.navigation.navigate("MyNextScreen", { userInput: this.state });

Ответ №1:

Используйте пакет npm react-navigation для перенаправления с одного экрана на другой экран, вы также можете передавать значения

Для этого есть две части:

Передает параметры маршруту, помещая их в объект в качестве второго параметра функции navigation.navigate:

 this.props.navigation.navigate
('RouteName', { /* params go here */ })




onPress={()=>this.props.navigation.navigate('Details', 
    { itemId: 86, otherParam: 'anything you want here', })};

Прочитайте параметры в вашем экранном компоненте:

 this.props.navigation.getParam(paramName, defaultValue)

Для получения дополнительной информации, пожалуйста, прочитайте следующий документ

Навигационная ссылка React