React Native 中的状态栏颜色

Posted

技术标签:

【中文标题】React Native 中的状态栏颜色【英文标题】:StatusBar color in React Native 【发布时间】:2017-10-10 14:08:09 【问题描述】:

如何在不编辑 android 特定文件的情况下从 react-native 更改 StatusBar 组件的背景颜色?

文档says,我可以使用backgroundColor 属性。但它失败了。 barStyle 属性,setBarStyle && setBackgroundColor 静态方法也不能正常工作。

只有 hidden 属性有效。

我正在使用create-react-native-app,使用Expo 构建。

【问题讨论】:

【参考方案1】:

在 Expo App 中,您需要在项目根目录中编辑app.json,如下所示:


    "expo": 
        "sdkVersion": "16.0.0",
        "androidStatusBar": 
            "barStyle": "dark-content",
            "backgroundColor": "#0A48A5"
        
    

参见世博会文档: https://docs.expo.io/versions/v16.0.0/guides/configuration.html

【讨论】:

它有帮助,但只能与 <StatusBar barStyle="light-content" backgroundColor="#1976D2"/> 结合使用。谢谢! @Tehreem 你重启了 expo 开发了吗?我在上面添加了这个设置,它只有在我在 VS Code 中再次“启动”我的应用程序后才会生效【参考方案2】:

你可以使用

<StatusBar
 backgroundColor="blue"
 barStyle="light-content"
/>

您可以查看文档here。

【讨论】:

【参考方案3】:

..android/app/src/main/res/values 中添加 color.xml 并粘贴以下代码

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   color for the app bar and other primary UI elements -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   a darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars -->
    <color name="colorPrimaryDark">#A52D53</color>

    <!--   a secondary color for controls like checkboxes and text fields -->
    <color name="colorAccent">#FF4081</color>
</resources>

..android/app/src/main/res/values/styles.xml 中复制并粘贴以下代码

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>    
</style>

【讨论】:

【参考方案4】:

使用这个

import StatusBar from 'react-native';


const bar = ()=>
  return( <StatusBar backgroundColor="insert your color here"/> );
;

【讨论】:

以上是关于React Native 中的状态栏颜色的主要内容,如果未能解决你的问题,请参考以下文章

React Native 状态栏颜色错误

React-native-splash-screen 状态栏颜色(不兼容的类型)

如何在 React Native 中设置 iOS 状态栏背景颜色?

在 iOS 中 React Native 更改状态栏文本颜色

React-native android 工具栏位于状态栏下方

React Native IOS 状态栏背景