react-navigation 子组件数据到父组件 function [react-navigation 5]

Question

[i'm new in react-native.]

how do i pass child component data to parent component function in react-navigation 5

suppose i navigate to child component from parent component parent.jsx by

this.props.navigation.navigate('ChildComponentScreen');

i have a function in parent.jsx component

parentFunction = (data) => {

}

how i called parentFunction in parent.jsx from child.jsx component with data.

Answer 1

You can pass the function as a parameter to the next screen(ChildScreen) like below

class HomeScreen extends React.Component {
  sendData = (data) => {
    alert(data);
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() =>
            this.props.navigation.navigate('ChildComponent', {
              sendData: this.sendData,
            })
          }
        />
      </View>
    );
  }
}

And call it from the child screen like below

class ChildScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.route.params.sendData('Details')}
        />
      </View>
    );
  }
}

Hope this helps.