阵营导航堆栈导航后退按钮造型的Android
问题描述:
我实现了一个堆栈导航如下:阵营导航堆栈导航后退按钮造型的Android
const MainNav = StackNavigator({
notes: { screen: NotesScreen },
addNote: { screen: AddNoteScreen }
}, {
initialRouteName: 'notes'
});
现在,当我从我的NotesScreen
去我AddNoteScreen
我得到的返回箭头预期。不过,我已经使用以下navigationOptions
称呼我的头为AddNoteScreen
:
static navigationOptions =() => ({
title: 'Add a note',
headerStyle: {
height: Platform.OS === 'android' ? 54 + STATUS_BAR_HEIGHT : 54,
backgroundColor: '#2196F3'
},
headerTitleStyle: {
marginTop: Platform.OS === 'android' ? STATUS_BAR_HEIGHT : 0,
color: 'white'
}
})
现在headerTitleStyle
不会影响Android上的后退箭头。我怎样才能让Android上的后退箭头采用与headerTitleStyle
相同的样式?
这是当前的问题的图像:
答
有一个在其可被用来改变后退按钮图标颜色navigationOptions属性headerTintColor。除了现在没有其他选项react-navigation v1.0.0-beta.11来自定义后退按钮。
static navigationOptions =() => ({
title: 'Add a note',
headerStyle: {
height: Platform.OS === 'android' ? 54 + STATUS_BAR_HEIGHT : 54,
backgroundColor: '#2196F3'
},
headerTitleStyle: {
marginTop: Platform.OS === 'android' ? STATUS_BAR_HEIGHT : 0,
color: 'white'
},
headerTintColor: 'white'
})
的BTW,而不是在标题样式处理状态栏的高度,只是使你的根组件内的反应本地状态栏的组件如
import {
AppRegistry,
View,
StatusBar,
} from 'react-native';
class AppWithStatusBar extends Component {
render() {
return(
<View style={{flex: 1}}>
<StatusBar barStyle="light-content"/>
<MainNav />
</View>
);
}
}
然后使这个“AppWithStatusBar”组件
AppRegistry.registerComponent('your_app',() => AppWithStatusBar);
StatusBar不起作用:/ –
对,发现我的项目版本还不支持。我解决了使用视图和状态栏高度的问题。感谢您指点我正确的方向! –