ReactNative切换Tab改变状态栏

作者: 飞奔在路上 | 来源:发表于2018-09-04 15:50 被阅读28次

Ready

现在大多数的ReactNative使用的路由都是react navigation.本示例就以react-navigation为例.解决其中遇到有需要切换tab来改变顶部状态栏字体以及背景色的需求

Go

only have a single line of code

 componentDidMount() {
        this._navListener = this.props.navigation.addListener('didFocus', () => {
            StatusBar.setBarStyle('light-content');
            //!IOS && StatusBar.setBackgroundColor('#6a51ae');
        });
    }
  componentWillUnmount() {
        this._navListener.remove();
    }
 
StatusBar.setBarStyle('light-content');//是设置为白色(仅IOS有效)
StatusBar.setBarStyle('dark-content');//是设置为黑色(仅IOS有效)
!IOS && StatusBar.setBackgroundColor('#6a51ae')//Android可以修改背景色

最终效果 Untitled1.gif

相关文章

网友评论

  • haisonLIN:大佬,你的意思是,每个tab的页面顶部导航栏可以单独设置是吗
    飞奔在路上:对的 每个都可以单独设置
    也可以使用rn自带的事件监听做到类似的效果

本文标题:ReactNative切换Tab改变状态栏

本文链接:https://www.haomeiwen.com/subject/qjogwftx.html