将道具传递给底层屏幕

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道具传递给此/所有屏幕？我尝试使用screenProps访问navigationOptions: (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 }} />

这应该做的事情。