问题
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