使用反应导航更改状态栏颜色

Question

我在我的应用程序中使用来自反应导航的 DrawerNavigator。没有任何自定义，Android 状态栏是蓝色的，而不是黑色。

我试过了

StatusBar.setBackgroundColor('#000000');

但它只工作了几秒钟，然后又变回蓝色。似乎我正在使用的东西将状态栏颜色设置为蓝色。但是，我试图删除所有依赖项并只保留 react-navigation，但它仍然发生并且 react-navigation 的文档对此没有任何说明。

如何使用 react-navigation 将状态栏颜色设置为黑色？

Answer 1

您是否尝试设置 DrawerNavigator 配置？文档说 contentOptions 允许您自定义抽屉内容。

在您定义 DrawerNavigator 的文件中，也许是您的 router.js 文件。您应该将导航器创建为：

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

也许此页面会对您有所帮助：DrawerNavigator

目前，您的 Drawer 肯定会在某个时候重新渲染，这就是颜色 returns 变为蓝色的原因。

Answer 2

我认为 react-navigation 和 StatusBar 之间没有任何冲突，但我认为您应该使用 <StatusBar> 组件而不是命令式 API .这很可能是由于您的应用程序重新呈现而导致的，它只是切换回默认设置，使用组件声明，您确保它不会发生。

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

您甚至可以在每条路线上设置多个，以根据路径进行更改。如果您想根据用户更改它并使用 redux，请在连接的组件中声明它并传递 backgroundColor.

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

就像 Aperçu 说的那样，react-navigation 和 StatusBar 之间没有冲突。每个屏幕都应该能够在设备的状态栏上设置属性，并且在 createNavigationContainer 中定义的容器应该获取状态更改的选项，并在本机应用它们。为整个 App 的 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 5

你可能想用这个，插件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>
    );
  }
}

Answer 6

除了@Balthazar 的回答之外，如果您使用的是 SafereaView，那么您可能需要像这样在样式表中设置状态栏颜色：

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

P.S。此代码还检测 android 带缺口的设备中的 SafeAreaView。

Answer 7

避免手动处理屏幕的安装和卸载，例如通过更新 redux state，你也可以使用 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>
    )
}

Answer 8

在你的根组件中，你必须导入

StatusBar

您可以按照下面的代码。

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;

谢谢！

使用反应导航更改状态栏颜色

Change status bar color with react-navigation

android-statusbar

react-native

react-navigation