Question

我刚开始使用React Native for Android，我想弄清楚是否有办法改变Android的状态栏颜色......

喜欢这个吗？

Answer 1

您可以使用React Native Status Bar（详细说明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文件中没有提到它。

Answer 2

目前没有办法从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

Answer 3

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

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

颜色变化不会反映21之前的版本

Answer 4

在标题组件

上添加此代码

androidStatusBarColor="#34495e"

Answer 5

目前没有公开的API。这仅适用于Android 5.0。在桥模块上工作以实现相同的目标。会让你发布

Answer 6

如果您使用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 App，这是设置StatusBar颜色的方式。另外，将其设置为半透明，以便您的应用程序在状态栏下绘制并保持美观。

希望它对您来说完美。

Answer 7

是的，您可以：

import {StatusBar} from 'react-native';
componentDidMount(){
StatusBar.setBarStyle( 'light-content',true)
    StatusBar.setBackgroundColor("#0996AE")

}

Answer 8

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

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

引用：https://docs.expo.io/versions/latest/guides/configuring-statusbar/

Answer 9

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

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

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

    import {StatusBar} from 'react-native';

Answer 10

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

Answer 11

在StatusBar组件中使用 backgroundColor 属性

<StatusBar backgroundColor="#yourColor" />

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

Answer 12

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

安装它

有没有办法用React Native更改Android状态栏颜色？

12 个答案: