pass the status from the parent screen to the children screen-CodePudding

hi everyone i am new to react-native and i have a problem in passing the status from the parent component (HomePage.js) to the daughter component (SecondPage.js). On the parent screen (HomePage) instead of just having the button, I also have the result of the daughter's status. i.e. on the Homepage I have: "result is: ooo" and below I have the button. If I click on the button, the SecondPage screen appears with the result "result is:" without passing the value of the state of the parent component "ooo".

in HomePage.js

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')}  
                        title="DETAILE"  color="orange"/>   
                  </View>       

  );
}
}

And in SecondPage.js

export default class SecondPage extends Component {
    render(){      
    return (
            <View >
                <Text>result is: {this.props.stato}</Text>
            </View>     
    )
    }
}

I want to have in the parent screen (HomePage), a button that takes me to the child screen that shows me the result "result is:ooo". how can I solve my problem? because in the parent screen (HomePage) I have the result of the child screen (SeconPage )?

CodePudding user response：

you have two mode of using second page. the first mode is using component in your home page and it's correct.but in the navigation mode you should pass the parameter in this way =>

<Button onPress={ () => this.props.navigation.navigate('SecondPage', {stato: this.state.sid})} title="DETAILE" color="orange"/>

and in the second page =>

result is: {this.props.stato ? this.props.stato : this.props.navigation.state.params.stato}

note: if you use new version of react navigation instead of (this.props.navigation.state.params.stato) use route.params.stato