Question

使用react native和react导航我使用了DrawNavigator和几个StackNavigator。现在，我要一次为所有StackNavigator定义StackNavigator的标题样式（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 ?!
)

有一种比重复写入外观更聪明的解决方案。

在缩放应用程序时，我可能会有很多StackNavigator，并希望它们具有相同的标题/外观。

感谢您的想法！

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

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

1 个答案: