React Native父组件向子页面传递状态问题求助

1. 修改HomePage.js（解决跳转传参+移除直接渲染子组件） #

删掉直接渲染的<SecondPage>代码，同时在跳转时通过navigate方法传递参数：

export default class HomePage extends Component {
  static navigation={}
  constructor(){
    super(); 
    this.state = {alreadyLaunched: null,sid:"ooo"};
  }
  render(){
    return (
      <View style={styles.container}>     
        {/* 移除直接渲染的子组件，解决首页显示子页面内容的问题 */}
        {/* <SecondPage stato={this.state.sid} /> */}                   
        <Button
          onPress={ () => this.props.navigation.navigate('SecondPage', { stato: this.state.sid })}  
          title="DETAILE"  color="orange"/>
      </View>       
    );
  }
}  

2. 修改SecondPage.js（接收导航传递的参数） #

通过this.props.route.params获取跳转时传递的参数，同时做空值判断避免报错：

export default class SecondPage extends Component {
  render(){
    const stato = this.props.route?.params?.stato || '';
    return (
      <View >
        <Text>result is: {stato}</Text>
      </View>     
    )
  }
}

关键说明 #

• 你之前在HomePage里直接渲染SecondPage属于组件嵌套实例，和通过navigation跳转的是完全独立的两个组件，所以跳转后的实例拿不到嵌套渲染时的props。
• React Navigation跳转传参时，参数会被存入目标页面的route.params对象中，类组件通过this.props.route即可访问（适配React Navigation 5及以上版本）。

内容的提问来源于stack exchange，提问作者Elly