React Native, передача двух значений на следующий экран в навигации

#javascript #html #ios #react-native #dom

#javascript #HTML #iOS #react-native #dom

Вопрос:

Здесь я могу отправить первое значение (postONE) из текущего на второй экран, и оно отлично отображается. но он не отображает второе значение (postTwo). Означает, что на следующем экране отображается случайное число без буквы «R».

Код текущего экрана:

 ....
render() {
    return (
        <View style={styles.MainContainer} >
            <Button title="Next" onPress={() => { 
                 this.props.navigation.navigate(
                 'Two', 
                 { postONE: Math.floor(Math.random() * 10)   10 }), 
                 { postTWO: 'R' } }} 
            />
        </View>
    );
  }
}
 

Это код второго экрана:

 ....
render() {
    const { postONE, postTWO } = this.props.route.params;
    return (
        <View style={styles.MainContainer} >
            <Text style={styles.textCat}>{postGRN}</Text>
            <Text style={styles.textCat}>{postGNR}</Text>
        </View>
    );
  }
}
 

Ответ №1:

 <Button
        title="Next"
        onPress={() => {
          navigation.navigate('Two', {
            postONE: Math.floor(Math.random() * 10)   10,
            postTWO: 'R',
          });
        }}
      />
 

Подробнее: передача параметров маршрутам

Ответ №2:

Проблема в том, что вы передаете два разных объекта в навигации. Но первый объект — это место, куда вы передаете все свои реквизиты.

Вот код для правильной передачи значений:

 render() {
    return (
        <View style={styles.MainContainer} >
            <Button title="Next" onPress={() => { 
                 this.props.navigation.navigate(
                 'Two', 
                 { 
                  postONE: Math.floor(Math.random() * 10)   10, 
                  postTWO: 'R'  
                 })}} 
            />
        </View>
    );
  }
}
 

Ответ №3:

Вам нужно передать эти значения в одном объекте, например

{ postONE: Math.floor(Math.random() * 10) 10, postTWO: ‘R’ }

что-то вроде

     this.props.navigation.navigate(
        'Two', 
        { 
            postONE: Math.floor(Math.random() * 10)   10, 
            postTWO: 'R'  
        })}}