Стиль навигации по умолчанию для каждого стека

Question

У меня есть стиль навигации по умолчанию, который я хочу включить во все мои стеки, чтобы у меня был этот объект.

const navigationDefaultStyle = {
  headerStyle: { backgroundColor:"#fff", height:60},
  headerTitle: (<View style={{marginTop:5, flex: 1, flexDirection: 'row', justifyContent: 'center' }}><Image style={{ width:140, height: 36, marginTop: 0, marginRight: 5}} source={require('./app/images/logo.png')}/></View>),
  headerRight: (<TouchableOpacity activeOpacity={0.8} onPress={ async () => {

      navigation.navigate('Settings', {transitionStyle:'default'})

    } } style={{ marginRight:15, marginTop:5 }}>
      <Icon name="cog" type="light" color="#29317C" size={26} />
    </TouchableOpacity>)
}

Однако, если я это сделаю, navigation.navigate не будет работать, потому что он не определен.

В любом случае можно ли применить этот объект к каждому стеку, выполнив следующее:

const Login = createStackNavigator({ SignIn: { screen: SignInScreen, navigationOptions: ({ navigation }) => (navigationDefaultStyle) } });
const Sync = createStackNavigator({ Sync: { screen: SyncScreen, navigationOptions: ({ navigation }) => (navigationDefaultStyle) } });
const Identification = createStackNavigator({ Identification: { screen: IDScreen, navigationOptions: ({ navigation }) => (navigationDefaultStyle) } });

Answer 1

Вы можете попробовать пройти навигационную опору

const navigationDefaultStyle = (navigation)=>{
  return{
   headerStyle: { backgroundColor:"#fff", height:60},
   headerTitle: (<View style={{marginTop:5, flex: 1, flexDirection: 'row', justifyContent: 'center' }}><Image style={{ width:140, height: 36, marginTop: 0, marginRight: 5}} source={require('./app/images/logo.png')}/></View>),
   headerRight: (<TouchableOpacity activeOpacity={0.8} onPress={ async () => {

      navigation.navigate('Settings', {transitionStyle:'default'})

    } } style={{ marginRight:15, marginTop:5 }}>
      <Icon name="cog" type="light" color="#29317C" size={26} />
    </TouchableOpacity>)
}}

, а затем просто

const Login = createStackNavigator({ SignIn: { screen: SignInScreen, navigationOptions: ({ navigation }) => (navigationDefaultStyle(navigation)) } });