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

Question

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

像这样？

Answer 1

您可以使用React Native Status Bar(此处有详细说明).您需要做的就是使用视图包装导航器并在其上方添加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

您可以使用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

Answer 3

是的你可以：

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

}

Answer 4

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

androidStatusBarColor="#34495e"

Answer 5

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

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 7

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

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

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