共享多个堆栈导航器的导航选项

Question

使用带有反应导航的反应本机我使用一个 DrawNavigator 和几个 StackNavigator。现在我想一次性定义 StackNavigator 的 header 样式（header 随 StackNavigator 一起提供）。

这是我的：

// View1.js

export default StackNav1 = createStackNavigator(
    {
        View1: View1Screen,
        View2: View2Screen
    },
    {
        defaultNavigationOptions: ({ navigation }) => {
            return {
                headerStyle: {
                    backgroundColor: '#9eb9b3',
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontWeight: 'bold',
                },
                headerLeft: (
                    <Icon style={{ paddingLeft: 10 }} name="bars" size={30}
                        onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
                    />
                ),
            }
        }
    }
)

// View2.js

export default StackNav2 = createStackNavigator(
    {
        View3: View3Screen,
        View4: View4Screen
    },
    // here I need to define the style from View1.js again ?!
)

有没有比一遍又一遍写更聪明的解决方案来分享外观。

当应用程序扩展时，我可能会有很多 StackNavigators 并希望它们具有相同的 header/appearance。

感谢您的想法！

Answer 1

创建stackNavigatorConfig，这是react导航方法的第二个参数。

stackNavigatorConfig = {
  defaultNavigationOptions: ({ navigation }) => {
    return {
      headerStyle: {
        backgroundColor: '#9eb9b3'
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold'
      },
      headerLeft: (
        <Icon
          style={{ paddingLeft: 10 }}
          name="bars"
          size={30}
          onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
        />
      )
    };
  }
};

那你就可以像这样使用了

export default StackNav1 = createStackNavigator({
      View1: View1Screen,
      View2: View2Screen
  },
  stackNavigatorConfig);

export default StackNav2 = createStackNavigator({
    View3: View3Screen,
    View4: View4Screen
  },
  stackNavigatorConfig);

共享多个堆栈导航器的导航选项

Share Navigation Options for Multiple Stack Navigator

react-native

react-native-navigation