React Native中的状态栏颜色

Question

如何在不编辑 Android 特定文件的情况下，更改来自 react-native 的 StatusBar 组件的背景颜色？

文档表示，可以使用backgroundColor属性。但它失败了。 barStyle 属性、setBarStyle 和 setBackgroundColor 静态方法也无法正常工作。

只有 hidden 属性有效。

我正在使用由 create-react-native-app 建立的 Expo。

- Maxim Romanyuk

Answer 1

在Expo App中，您需要像这样编辑位于项目根目录中的app.json：

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

请查看Expo文档：https://docs.expo.io/versions/v16.0.0/guides/configuration.html。

- Rick Liao

---

有帮助，但只有与 <StatusBar barStyle="light-content" backgroundColor="#1976D2"/> 结合使用才有效。谢谢！ - Maxim Romanyuk

@Tehreem 你重启了Expo开发吗？我在上面添加了这个设置，但只有在我在VS Code中再次“yarn start”我的应用程序后才会生效。 - qmn1711

Answer 2

您可以使用

标签来分段

。

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

你可以在这里查看文档。

- Antoine Grandchamp

Answer 3

将color.xml添加到..android/app/src/main/res/values中，然后粘贴以下代码：

<?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>

- Mojtaba Darzi

Answer 4

使用这个。

import {StatusBar} from 'react-native';


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

- Aymen