React Native，在导航中将两个值传递到下一个屏幕

Posted 2023-03-14

【中文标题】React Native，在导航中将两个值传递到下一个屏幕

【英文标题】：React Native, Passing Two Values to Next Screen within Navigation

【发布时间】：2020-12-04 18:11:24

【问题描述】：

在这里，我能够将 (postONE) 的第一个值从当前发送到屏幕二，它完美地显示在那里。 但它不显示 (postTwo) 的第二个值。表示下一个屏幕显示随机数，不带“R”。

当前屏幕 One 的代码：

....
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',
          );
        
      />

更多：Passing parameters to routes

【参考方案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, 后二：'R'

类似

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