javascript - 是否有共同的地方设置headerStyle，HeaderTitleStyle等

我有简单的DrawerNavigator，其中包含多个StackNavigator。

我的问题是，我已经设置了“ navigationOptions”，这对于所有“ StackNavigator”都是相同的

const DrawerMainRoutes = DrawerNavigator({
   Stack1: { screen: Stack1 }
   Stack2: { screen: Stack2 }
   Stack3: { screen: Stack4 }
})


const Sack1 = StackNavigator({
   Stack1: {
     screen: View
   },
   navigationOptions: {
     headerStyle: 'Blue',
     headerTitleStyle: { color: '#fff', },
     headerTintColor: '#fff',
     headerLeft: <MenuIcon />
   }
})

是否有更好的方法为每个StackNavigator设置通用的navigationOptions

最佳答案

navigationOptions应该在单独的变量中定义，然后可以重用它：

const navigationOptions = {
  headerStyle: 'Blue',
  headerTitleStyle: { color: '#fff', },
  headerTintColor: '#fff',
  headerLeft: <MenuIcon />
}

const Sack1 = StackNavigator({
   Stack1: {
     screen: View
   },
   navigationOptions
})

const Sack2 = StackNavigator({
   Stack2: {
     screen: View
   },
   navigationOptions
})

...

或者，您可以创建一个StackNavigator创建器函数：

const createStackNavigator = (routeOptions) =>
  StackNavigator(routeOptions, {
    navigationOptions: {
      headerStyle: 'Blue',
      headerTitleStyle: { color: '#fff', },
      headerTintColor: '#fff',
      headerLeft: <MenuIcon />
  })

const Stack1 = createStackNavigator({ Stack1: { screen: View } })
const Stack2 = createStackNavigator({ Stack2: { screen: View } })
....

关于javascript - 是否有共同的地方设置headerStyle，HeaderTitleStyle等，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45744417/