关于使用react-native-router-flux构建了具有tab的主页,在使用StatusBar配置不同barStyle和backgroundColor时,状态栏展示不对的问题

整个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
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值