Change the color of the status bar using interactive navigation

Question

I use DrawerNavigatorreaction-navigation in my application. Without any configuration, the Android status bar will be blue, 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'm using is setting the color of the status bar to blue. However, I tried to remove all the dependencies and only continue to respond to navigation, and this is still happening, and the response-navigation documents do not say anything about it.

How to set the status bar color to black using interactive navigation?

Answer 1

, react-navigation StatusBar, , <StatusBar>, API. , , , , , .

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

, . redux, backgroundColor.

Answer 2

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 3

, StatusBar. , , createNavigationContainer, . StatusBar .

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 4

DrawerNavigator? Doc , contentOptions .

, DrawerNavigator, , router.js. :

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

, : DrawerNavigator

Currently, your box is certainly being re-displayed at some point, so the color returns to blue.