react-native - 共享多堆栈导航器的导航选项

Question

使用带有反应导航的反应本机，我使用了一个 DrawNavigator 和几个 StackNavigator。现在我想一次性为所有 StackNavigator 定义 StackNavigator 的标题样式（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 并希望它们具有相同的标题/外观。

我很欣赏你的想法！

标签： react-nativereact-native-navigation

Answer 1

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

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);