我在我的应用程序中使用了反应导航中的
DrawerNavigator我尝试过做
StatusBar.setBackgroundColor('#000000');
但它只工作几秒钟，然后又变回蓝色。看来我正在使用的东西将状态栏颜色设置为蓝色。但是，我尝试删除所有依赖项并只保留react-navigation，但它仍然发生，并且react-navigation的文档对此没有任何说明。
如何使用反应导航将状态栏颜色设置为黑色？
我认为
react-navigationStatusBar<StatusBar><StatusBar backgroundColor='blue' barStyle='light-content' />
您甚至可以为每条路线设置多个路线，以根据路线进行更改。如果您想根据用户并使用
reduxbackgroundColor就像 Aperçu 所说的，react-navigation 和 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>;
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
避免通过例如手动操作来安装和拆卸屏幕。更新 redux 状态，您还可以使用 React navigation 的 useIsFocused。
假设您希望路线中的单个屏幕具有深色主题状态栏：
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>
)
}
您是否尝试设置您的 DrawerNavigator 配置？ 医生说
contentOptions在您定义
DrawerNavigatorrouter.jsconst MyApp = DrawerNavigator({
Home: {
screen: MyHomeScreen,
contentOptions: {
inactiveBackgroundColor: '#000000',
}
},
});
也许此页面会对您有所帮助：DrawerNavigator
目前，您的抽屉肯定会在某个时刻重新渲染，这就是颜色返回蓝色的原因。
除了@Balthazar 的回答之外，如果您使用 SafereaView，那么您可能需要在样式表中设置状态栏颜色，如下所示：
SafeArea: {
flex: 1,
backgroundColor: StatusBar.setBackgroundColor('black'),
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
}
附注此代码还可以检测带有缺口的 Android 设备中的 SafeAreaView。
// create the component 'ScreenWrapper.js'
import {useFocusEffect} from '@react-navigation/native';
import { View, StatusBar } from 'react-native';
import { useRoute } from '@react-navigation/native';
export const ScreenWrapper = ({ children }) => {
const route = useRoute();
useFocusEffect(useCallback(() => {
switch (route.name) {
case 'Welcome':
StatusBar.pushStackEntry({ barStyle: 'light-content',
hidden:false });
break;
case 'Signup':
StatusBar.pushStackEntry({ barStyle: 'dark-content',
hidden:false });
break;
default:
StatusBar.pushStackEntry({ barStyle: 'light-content', hidden:
true });
}
}, []));
// we are applying the background color to the component itself
return (
<View
style={{
flex: 1,
}}>
<StatusBar/>
{children}
</View>
);
};
// And wrap this screen wrapper to all your components
// eg:
<ScreenWrapper>
<Welcome/>
</ScreenWrapper>
您可能想使用这个插件navigationbar-react-native！
1、安装插件
npm i navigationbar-react-native --save
2、使用
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>
);
}
}在你的根组件中，你必须导入
状态栏
您可以按照以下代码操作。
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;
谢谢！