React Native学习React Native开发React Native 专题

ReactNative切换Tab改变状态栏

2018-09-04  本文已影响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

上一篇下一篇

猜你喜欢

热点阅读