Question

用户单击以导航到堆栈（也就是堆栈）中的屏幕。如何将初始屏幕可用的参数传递给整个堆栈？

const aStack = createStackNavigator({
DefaultScreen: DefaultScreen,

NavigatorScreen: {
    screen: ATabNavigator,
    navigationOptions: ({ navigation }) => {
      const id = navigation.state.params.id
      return {
        headerTitle: <Header id={id}  />,
        headerStyle: {backgroundColor: '#f6f6f6'},
        headerLeft: null
      }
    }
  },

})

因此，当有人点击我之前设置的链接时，他们会转到navigation.navigate('NavigatorScreen', {id: 1})

这使id可用于NavigatorScreen，我用来将其传递到Header组件，但是随后如何将该ID传递给ATabNavigator，以便选项卡导航器中的所有屏幕都可以访问它？ / p>

Answer 1

您可以像下面这样在屏幕上附加所需的参数

DefaultScreen.navigationOptions = {
  id: 1
};

然后您可以在任何屏幕上找到值

DefaultScreen.navigationOptions.id

另一种方法是使用状态管理存储（例如Mobx），该存储允许您共享值在所有屏幕之间进行修改您可以在下面的链接中找到更多详细信息：

https://github.com/mobxjs/mobx

希望这能回答您的问题

Answer 2

使用.getParam()来获取具有后备功能的特定参数值。

在您的NavigatorScreen中获得类似的值

const id = this.props.navigation.getParam('id', 'fallback value here');

或者像这样在navigationOptions中获取值

navigationOptions: ({ navigation }) => {

  const id = navigation.state.params.id;

}

Demo

如何在React导航中使参数可用于堆栈中的所有屏幕？

2 个答案: