问题
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 ?
回答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.
回答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>;
回答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
回答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.
回答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
}
P.S. this code also detects the SafeAreaView in android devices with notch.
回答6:
To avoid manually handling mounting and unmounting of screens by e.g. 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>
)
}
回答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!
回答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>
);
}
}来源：https://stackoverflow.com/questions/44326347/change-status-bar-color-with-react-navigation