有没有办法用 React Native 改变 Android 状态栏的颜色？答案

【问题标题】：Is there a way to change the Android status bar color with React Native?有没有办法用 React Native 改变 Android 状态栏的颜色？
【发布时间】：2015-12-21 09:38:54
【问题描述】：

我刚开始使用适用于 Android 的 React Native，我正在尝试找出是否有办法更改 Android 的状态栏颜色...

像这样？

【问题讨论】：

标签： android react-native statusbar

【解决方案1】：

你可以使用 React Native 状态栏（详细描述here）。您需要做的就是用视图包装导航器并在其上方添加一个 StatusBar 组件。不要忘记从“react-native”包中导入 StatusBar。

<View>
  <StatusBar
    backgroundColor="blue"
    barStyle="light-content"
  />
  <Navigator
    initialRoute={{statusBarHidden: true}}
    renderScene={(route, navigator) =>
      <View>
        <StatusBar hidden={route.statusBarHidden} />
         ...
      </View>
    }
  />
</View>

我注意到的一件事是您应该使用 flex:1 设置父视图的样式，没有它您只会看到一个白色的空白屏幕。但在 RN Documents 中并未提及。

【讨论】：

这行得通，在 android 项目中编辑 styles.xml 将不起作用。谢谢。
Navigator 现已弃用。所以寻找更好的解决方案。
StatusBar 是一个组件，可以与您喜欢的任何导航器一起使用。这只是一个例子
关于使用 flex:1 设置顶视图样式的有用提示

【解决方案2】：

是的，你可以：

import {StatusBar} from 'react-native';

componentDidMount() {
  StatusBar.setBarStyle( 'light-content',true)
  StatusBar.setBackgroundColor("#0996AE")
}

【讨论】：

【解决方案3】：

你可以使用react-native内置StatusBar函数

import {StatusBar} from 'react-native';

render() {
  return <View>
     <StatusBar
        backgroundColor="#264d9b"
        barStyle="light-content"
     />
     ... //Your code
   </View>
}

参考： https://facebook.github.io/react-native/docs/statusbar

【讨论】：

【解决方案4】：

我已经制作了一个 npm 包来控制 android 中的 StatusBar

https://www.npmjs.com/package/react-native-android-statusbar

颜色变化不适用于 21 之前的版本

【讨论】：

感谢模块！我将把它标记为答案，因为它似乎是解决它的“反应”方式。
给导航栏上色怎么样？
我认为 android 还没有为此发布 api
但是为“操作栏”或“应用栏”或“导航栏”着色呢？

【解决方案5】：

目前没有办法从 JS 中做到这一点。您可以使用自定义主题对其进行自定义。从您的项目中查看 android/src/main/res/values/styles.xml 文件（模板在此处：https://github.com/facebook/react-native/blob/master/local-cli/generator-android/templates/src/app/src/main/res/values/styles.xml）并在此处阅读更多信息：https://developer.android.com/training/material/theme.html

【讨论】：

哇，我完全忘记了在 React Native 下有一个实际的 Java 项目。虽然我想我必须使用 values-21 文件夹，因为 colorPrimary/colorPrimaryDark 的东西只能在 Lollipop 及更高版本上使用。或者引入 AppCompat...

【解决方案6】：

将此代码添加到您的标头组件中

androidStatusBarColor="#34495e"

【讨论】：

【解决方案7】：

如果您使用 Expo for React Native，那么这里是设置 Android 状态栏颜色的解决方案。

首先，在你的 app.json 文件中添加代码：

{
  "expo": {
    "sdkVersion": "Your given Version",
    "androidStatusBar": {
       "backgroundColor": "#4e2ba1" (Your desirable android Status Bar Color before the app loads)
    }
   }    
}

然后转到您的主组件或 App.js，从“react-native”导入“StatusBar”。然后添加以下代码作为回报：

return(
   <View style={{flex: 1}}>  (Do not forget to style flex as 1)
      <StatusBar translucent backgroundColor="rgba(0,0,0,0.2)"/>
      <Your Code>
   </View>
);

在这里，我们将状态栏颜色设置为黑色，但不透明度为 0.2。您的 statusBar 颜色将与 Stack Navigator 的 headerStyle 背景颜色相同，但更暗一些。对于标准的 Android 应用程序，这是设置状态栏颜色的方式。此外，将其设为半透明，以便您的应用在状态栏下绘制并且看起来不错。

希望这对你很有效。

【讨论】：

【解决方案8】：

在 ..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>

【讨论】：

【解决方案9】：

目前没有公开的 API。这仅适用于 Android 5.0。在桥接模块上工作以实现相同的目的。会及时通知你

【讨论】：

【解决方案10】：

只需将以下代码添加到类组件内的 App.js 文件中即可。

    componentDidMount(){
        StatusBar.setBarStyle( 'light-content',true)
        StatusBar.setBackgroundColor("Your color Hex-code here")
    }

并将其添加到您的导入语句中。

    import {StatusBar} from 'react-native';

【讨论】：

【解决方案11】：

如果你们正在使用 expo，那么只需将其添加到 app.json 中

"androidStatusBar": {
  "backgroundColor": "#ffffff",
  "barStyle":"dark-content"
}

参考：https://docs.expo.io/versions/latest/guides/configuring-statusbar/

【讨论】：

【解决方案12】：

在状态栏组件中使用 backgroundColor 道具

<StatusBar backgroundColor="#yourColor" />

查看文档更多信息：https://reactnative.dev/docs/statusbar

【讨论】：

【解决方案13】：

您可以使用react-native-navigation-bar-color这个模块来改变NavigationBar，使用npm i react-native-navigation-bar-color安装它

【讨论】：