使用 react-navigation 更改状态栏颜色

Question

I use a DrawerNavigator from react-navigation in my app. Without any customization, the Android status bar is blue, and not black.

I tried to do

StatusBar.setBackgroundColor('#000000');

but it only works for a few seconds, and then it goes back to blue. It seems that something I am using set the status bar color to blue. However, I tried to remove all dependencies and only keep react-navigation, and it still happens and the docs of react-navigation do not say anything about that.

How can I set the status bar color to black with react-navigation ?

Answer 1

I don't think there is any conflict between react-navigation and the StatusBar , but I think you should use the <StatusBar> component rather than the imperative API. There's a high chance this is due to a re-render of your app and it just switch back to the default, with a component declare, you ensure it won't happen.

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

You can even have multiple ones per route, to change it depending on the path. If you want to change it depending on the user and using redux , declare it in a connected component and pass the backgroundColor .

Answer 2

Like Aperçu said no conflict between react-navigation and the StatusBar. Each screen should be able to set properties on the device's status bar, and the container defined in createNavigationContainer should get the options on state change, and apply them natively. try this for StatusBar for entire App.

const AppContent = StackNavigator({
  Home: { screen: HomeScreen },
  Secondary: { screen: SecondaryScreen },
});

const App = () =>
  <View style={{flex: 1}}>
    <StatusBar backgroundColor="blue" barStyle="light-content"/> 
    // style the bar. barStyle is text and icon color od status bar.
   <AppContent />
 </View>;

Answer 3

import React, {Component} from 'react';
import {Text, TouchableOpacity, View, StatusBar} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import styles from "../styles/Style";

class ProfileScreen extends Component {

    static navigationOptions = ({navigation}) => {
        return {
            headerLeft: (
                <TouchableOpacity onPress={() => {
                    navigation.navigate('DrawerOpen');
                }}>
                    <Icon name="menu" size={30} color="#fff" style={styles.burgerIcon}/>
                </TouchableOpacity>
            ),
            title: 'My Profile',
            headerRight: (
                <Icon name={'edit'} size={30} color={'#fff'} style={styles.headerRightIcon}/>
            ),
            headerTintColor: "#fff",
            headerStyle: {
                backgroundColor: '#8BC83D',
                height: 56,
                elevation: null
            }
        };
    };

    render() {
        return (
            <View style={styles.screenContainer}>

                <StatusBar
                    backgroundColor="#7CB236"
                    barStyle="light-content"
                />
                <Text style={styles.welcome}>
                    I amsecond reder
                </Text>
            </View>
        );
    }
}
const ProfileScreenList = StackNavigator(
    {
    ProfileScreenIndex: {screen: ProfileScreen},
}
);
export default ProfileScreenList

Answer 4

Did you try setting your DrawerNavigator config ? Doc says that contentOptions allows you to customize the drawer content.

In the file where you define your DrawerNavigator , maybe your router.js file. You should create your Navigator as:

const MyApp = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,
        contentOptions: {
            inactiveBackgroundColor: '#000000',
        }
   },
});

Maybe this page will help you: DrawerNavigator

Currently, your Drawer is certainly re-rendered at some point, that's why the color returns to blue.

Answer 5

On top of @Balthazar's answer, if you are using SafereaView then you might need to set the Status Bar color in your stylesheet like this:

SafeArea: {
    flex: 1,
    backgroundColor: StatusBar.setBackgroundColor('black'),
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
 }

PS this code also detects the SafeAreaView in android devices with notch.

Answer 6

To avoid manually handling mounting and unmounting of screens by eg updating a redux state, you can also use react navigation's useIsFocused.

Let's say you want a single screen in a route to have a dark themed StatusBar:

import { StatusBar, View } from 'react-native';
import { useIsFocused } from '@react-navigation/native';

export default function MyDarkScreen() {
    const isFocused = useIsFocused();
    return (
        <View>
            {
                isFocused &&
                <StatusBar
                    barStyle={'dark-content'}
                    translucent
                    backgroundColor="transparent"
                />
            }
            <SomeOtherComponent />
        </View>
    )
}

Answer 7

In your root component, you have to import

StatusBar

You can follow the below code.

import React from 'react';
import {Text, View, StatusBar} from 'react-native';


const Home = () => {
      return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
           <StatusBar backgroundColor="#44A72C" barStyle="light-content" />
           <Text style={{fontFamily: 'UniNeueRegular-Italic'}}>Home Screen</Text>
        </View>
        );
      };
export default Home;

Thanks!

Answer 8

You may want to use this, plugin navigationbar-react-native !

1, Install plugin

npm i navigationbar-react-native --save

2, Using

 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text,Image, View, TouchableOpacity, } from 'react-native'; import NavigationBar from 'navigationbar-react-native'; const ComponentLeft = () => { return( <View style={{ flex: 1, alignItems: 'flex-start'}} > <TouchableOpacity style={ {justifyContent:'center', flexDirection: 'row'}}> <Image source={require('./img/ic_back.png')} style={{ resizeMode: 'contain', width: 20, height: 20, alignSelf: 'center' }} /> <Text style={{ color: 'white', }}>Back Home</Text> </TouchableOpacity> </View> ); }; const ComponentCenter = () => { return( <View style={{ flex: 1, }}> <Image source={require('./img/ic_logo.png')} style={{resizeMode: 'contain', width: 200, height: 35, alignSelf: 'center' }} /> </View> ); }; const ComponentRight = () => { return( <View style={{ flex: 1, alignItems: 'flex-end', }}> <TouchableOpacity> <Text style={{ color: 'white', }}> Right </Text> </TouchableOpacity> </View> ); }; class App extends Component { render() { return ( <View style={styles.container}> <NavigationBar componentLeft = { () => {<ComponentLeft /> } componentCenter = { () => {<ComponentCenter /> } componentRight = { () => {<ComponentRight /> } navigationBarStyle= {{ backgroundColor: ''#215e79'' }} statusBarStyle = {{ barStyle: 'light-content', backgroundColor: '#215e79' }} /> </View> ); } }