ReactNative切換Tab改變狀态欄

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