是否有一个常见的地方来设置headerStyle，HeaderTitleStyle等

Question

我有一个简单的DrawerNavigator，其中包含多个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 />
}
})

有没有更好的方法设置此导航每个堆栈导航器通用的选项

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