Question

[我是本机新手。]

如何在react-navigation 5中将子组件数据传递给父组件函数

假设我通过

从父组件 parent.jsx 导航到子组件

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

我在 parent.jsx 组件中具有功能

parentFunction = (data) => {

}

我是如何从 child.jsx 组件的 parent.jsx 中调用具有数据的parentFunction的。

Answer 1

您可以将函数作为参数传递给下一个屏幕（ChildScreen），如下所示

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>
    );
  }
}

然后从下面的子屏幕中调用它

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>
    );
  }
}

希望这会有所帮助。

将子组件的反应导航数据转换为父组件功能[反应导航5]

1 个答案: