整个RN工程使用了react-native-router-flux来做路由管理;
应用的主界面底部使用了tab进行分页。
<Scene
key="Tabbar"
hideNavBar={
true}
name="Tabbar"
showLabel={
false}
lazy={
false}
tabs={
true}
tabBarOnPress={
tabBarOnPress}
panHandlers={
null}
tabBarStyle={
tabBarStyle.tabbar}>
{
/* 首页 */}
<Scene
key="Home"
component={
Home}
initial={
true}
hideNavBar={
true}
tabBarLabel="首页"
icon={
TabIcon}
iconImg={
require('../assets/image/tabbar/tabbar_home_icon.png')}
iconActiveImg={
require('../assets/image/tabbar/tabbar_home_icon_active.png')}
/>
{
/* 发布 */}
<Scene
key="Publish"
component={
Publish}
hideNavBar={
true}
tabBarLabel="发布"
icon={
PlusIcon}
iconImg={
require('../assets/image/tabbar/tabbar_plus_icon.png')}
iconActiveImg={
require('../assets/image/tabbar/tabbar_plus_icon.png')}
/>
{
/* 个人中心 */}
<Scene
key="Account"
component={
Account}
hideNavBar={
true}
tabBarLabel="我的"
icon={
TabIcon}
iconImg={
require('../assets/image/tabbar/tabbar_account_icon.png')}
iconActiveImg={
require('../assets/image/tabbar/tabbar_account_icon_active.png')}
/>
</Scene>
然后Home页面和Account页面希望状态栏使用不同的颜色风格;
Home.js里面如下
<Container style={
[styles.container]} iosBarStyle="light-content" androidStatusBarColor="#65D3BA">
...
</Container>
Account.js里面如下
<Container style={
styles.container} iosBarStyle="dark-content" androidStatusBarColor="#ff0">
...
</Container>
这里的Container是简单封装了一下StatusBar 和 SafeAreaView。大致如下:
import {
Container as NBContainer } from 'native-base';
...
render() {
const {
androidStatusBarColor,
iosBarStyle,
style,
transparent,
translucent,
} = this.props;
return (
<NBContainer /* style={style} */>
<StatusBar
backgroundColor={
androidStatusBarColor}
barStyle={
iosBarStyle}
translucent={
transparent ? true : translucent}
/>
<SafeAreaView
style={
[style]}
>
<View ref={
c => (this._root = c)} style={
{
flex: 1 }} >
{
this.props.children}
</View>
</SafeAreaView>
</NBContainer>
);
}
以IOS端为例,主页底部栏从左到右对应Home、Publish、Account页面,Home使用light-content的barStyle,Account使用了dark-content的barStyle。
理论上app启动后,初始化是进入Home页面,状态栏应该是light-content风格;但是设备上显示的是dark-content风格;
为了修正这个问题,尝试在Home的DidMount里面重新修改BarStyle,
componentDidMount() {
setTimeout(() => {
Platform.OS === 'ios' ? StatusBar.setBarStyle('light-content') : StatusBar.setBackgroundColor('#65D3BA');
}, 2000);
}
这样的话,app启动后Home页面展示的确实是light-content风格。
但是如果此时在Home页面里,跳转到一个新的场景页面:
Actions.AnotherPage()
不管AnotherPage里面如何设置barStyle,在退出这个AnotherPage()回到应用的主场景,不管是Home\Publish\Account页面,此时的barStyle只会是Account对应的dark-content风格。
这样感觉就有点奇怪了,明明我在Home的DidMount里面重新修改了barStyle为light-content,AnotherPage在退出以后,app的statusBar应该重置到我最后一次修改的light-content上。
现在只能看StatusBar的源码里到底是如何处理的了。
react-native/Libraries/Components/StatusBar.js;
/**
* Set the status bar style
* @param style Status bar style to set
* @param animated Animate the style change.
*/
static setBarStyle(style: StatusBarStyle, animated