Question

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

我的问题是，我已经设置了＆＃39; navigationOptions＆＃39;对于所有＆＃39; StackNavigator＆＃39;

都是一样的

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

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

1 个答案: