每个堆栈的默认导航样式
Default Navigation Style for every stack
我有一个默认的导航样式,我想将它合并到我的所有堆栈中,所以我有这个对象。
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) } });
您可以尝试传递导航道具
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)) } });
我有一个默认的导航样式,我想将它合并到我的所有堆栈中,所以我有这个对象。
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) } });
您可以尝试传递导航道具
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)) } });