ReactNative切换Tab改变状态栏

最新推荐文章于 2024-05-16 01:36:19 发布

转载最新推荐文章于 2024-05-16 01:36:19 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/658518

文章标签：

#移动开发 #javascript #ViewUI

本文介绍如何在React Native应用中使用react-navigation时，通过监听路由变化来改变顶部状态栏的字体颜色及背景色。这种方法适用于需要根据不同页面切换状态栏样式的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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可以修改背景色