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

を設定していているが、このnavigationOptionsすべてのStackNavigator

のための共通の

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