版本:
"native-base": "^2.4.2",
"react": "16.3.1",
"react-native": "0.55.2",
"react-native-global-font": "^1.0.1",
"react-native-router-flux": "^4.0.0-beta.28",
"react-navigation": "^1.5.11"
当我添加react-navigation时,我无法更改状态栏颜色,我的状态栏变成了蓝色。
这是我的Navigationview.js代码:
render() {
return (
<Root style={styles.container}>
<StatusBar
backgroundColor="white"
barStyle="dark-content"
/>
<MainView />
</Root>
);
}
const drawerHeader = (props) => (
<Container style={styles.container}>
<Header style={styles.header}>
<Body style={styles.body}>
<Icon name="person" style={{ fontSize: 40, color: '#CCCCCC' }} />
</Body>
</Header>
<Content>
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerItems {...props} />
<Button title="Logout" onPress={() => Actions.reset('login')} />
</SafeAreaView>
</Content>
</Container>
);
const MainView = DrawerNavigator({
DASHBOARD: {
screen: Dashboard,
},
LOGOUT: {
screen: LoginForm,
}
}, {
initialRouteName: 'DASHBOARD',
contentComponent: drawerHeader,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToogleRoute: 'DrawerToogle'
});
i even set statusbar color in Dashboard screen, still not change.
Dashboard.js
<Container>
<Header androidStatusBarColor="#FFF" style={{backgroundColor:'#000'}}>
<StatusBar
backgroundColor="white"
barStyle="dark-content"
/>
<Body>
<Title style={{color:'#FFF'}}>My App</Title>
</Body>
</Header>
<Content>
//content of your app goes here
</Content>
</Container>
I m also using native-base, so i add this code in my App.js file
render() {
return (
<Root style={styles.container}>
<StatusBar
backgroundColor="white"
barStyle="dark-content"
/>
{this.spinerRender()}
</Root>
);
}
这对我的登录和注册界面有效,但对我的导航视图屏幕无效。
登录和注册界面状态栏
导航界面状态栏