React Navigation 传递导航道具

Question

根据反应导航文档，当您 select 来自堆栈导航器的屏幕时，导航道具将被传递。

例如，如果我注册了两条路线：主屏幕详情

export default class HomeScreen extends React.Component {


  render() {
    return (
      <View style={styles.container}>
      <Button
        onPress={() => this.props.navigation.navigate('Details')}>
        <Text>Press me</Text>
      </Button>
      </View>
    );
  }

}

够简单！但是让我们假设我有另一个组件被调用：

export default class HomeScreen extends React.Component {


  render() {
    return (
      <View style={styles.container}>
      <MyOtherComponent />
      </View>
    );
  }

}

我想要这样：

<Button
            onPress={() => this.props.navigation.navigate('Details')}>
            <Text>Press me</Text>
          </Button>

要加入，我该怎么做？我会将 HomeScreen 中的道具传递给 MyOtherComponent 吗？

Answer 1

我实际上在文档中找到了答案。对于没有像我一样浏览所有文档的其他人，这可能会有所帮助。

我可以用withNavigation

在 MyOtherComponent 的示例中，我可以执行以下操作：

从 'react-navigation' 导入 { withNavigation };

class MyOtherComponent extends React.Component {
render stuff here
}

导出默认 withNavigation(MyBackButton);

React Navigation 传递导航道具

React Navigation pass navigation prop

react-native-navigation