将道具传递给底层屏幕

Question

我有以下嵌套结构：

- StackNavigator
 - TabBar
   - TabScreen1
   - TabScreen2
   - TabScreen3
   - TabScreen4
 - NormalScreen

主stacknavigator是这样调用的：

<Router notifications={6} />

看起来像这样：

    const Router = StackNavigator({
  MainTabBar: { screen: MainTabBar },
  ChartDetailScreen: { screen: ChartDetailScreen },
}, {
  headerMode: 'none',
  initialRouteName: 'MainTabBar',
});

在这些 TabScreens 之一中，我需要访问 notifications 属性，它被传递给 stacknavigator。

屏幕配置基本上是这样的：

Screen1: {
      screen: Screen1,
      navigationOptions: {
        tabBarLabel: 'Screen1',
        tabBarIcon: ({ tintColor }) => (
          <Image ... />), <-- I need notifications here!
      },
    },

如何将外部 stacknavigator 的 notification 属性传递给 this/all 屏幕？我试图用 navigationOptions: (screenProps) => {...} 访问 screenProps，但没有出现这个属性。

我使用 React Navigation "version": "1.0.0-beta.19"。

Answer 1

您应该将 navigationOptions 构建为一个函数：

navigationOptions: ({ screenProps }) => ({
  tabBarIcon: ({ tintColor }) => (
    <Image notifications={screenProps.notifications} />
  ),
  ...
});

然后将 screenProps (https://reactnavigation.org/docs/navigators/stack#Navigator-Props) 作为对象传递，例如：

<Router screenProps={{ notifications: 6 }} />

这应该可以做到。

将道具传递给底层屏幕

Pass props to underlying screens

react-native

react-navigation