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

Question

我有简单的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通用

Answer 1

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 } })
....