StatusBar color in React Native

穿精又带淫゛_ 提交于 2019-12-10 14:05:45

问题


How can I change background color of StatusBar component from react-native, without editing Android specific files?

Docs says, that I can use backgroundColor property. But it fails. barStyle property, setBarStyle && setBackgroundColor static methods don`t work properly too.

Only hidden property works.

I`m using create-react-native-app, built with Expo.


回答1:


In Expo App, you need to edit app.json in your project root directory like this:

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

See Expo documentation: https://docs.expo.io/versions/v16.0.0/guides/configuration.html




回答2:


add color.xml in ..android/app/src/main/res/values and pate following code

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

copy and pate following code in ..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>



回答3:


You can use

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

You can see the documentation here.




回答4:


use this

import {StatusBar} from 'react-native';


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


来源:https://stackoverflow.com/questions/43917663/statusbar-color-in-react-native

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!