React Native Drawer 更改状态栏的颜色

Question

我正在使用 React Native Drawer 包。使用时，iOS状态栏背景色变为白色

这是我的代码示例：

可在此处获取演示：https://snack.expo.io/@dennismadsen/react-native-drawer-status-bar-issue

  render() {
    return (
      <Drawer
        ref={ref => (this._drawer = ref)}
        content={<AssetExample />}
        type="overlay"
        styles={drawerStyles}>
        <View>
          <Button
            onPress={this.openControlPanel}
            title="Open drawer"
            color="blue"
          />
        </View>
      </Drawer>
    );
  }

如何解决这个问题并使背景自动使用内容区域的灰色背景？如果我从渲染方法中删除 Drawer，状态栏的背景颜色将按预期变为灰色。

Answer 1

您可以使用 Fragment（来自 React）和 SafeAreaView（来自 React Native），如下所示：


    import React,{Fragment} from 'react';
    import { Button, Text, View, StyleSheet, SafeAreaView } from 'react-native';
    import Constants from 'expo-constants';
    import Drawer, { DrawerStyles } from 'react-native-drawer';

    import AssetExample from './components/AssetExample';

    export default class App extends React.Component {

      openControlPanel = () => {
        this._drawer.open();
      };

      render() {
        return (
          <Fragment>
           <SafeAreaView style={{ flex: 0, backgroundColor: 'red' }} />
           <Drawer
            ref={ref => (this._drawer = ref)}
            content={<AssetExample />}
            type="overlay"
            styles={drawerStyles}>
            <View>
              <Button
                onPress={this.openControlPanel}
                title="Open drawer"
                color="blue"
              />
            </View>
           </Drawer>
          </Fragment>
        );
      }
    }

    const drawerStyles: DrawerStyles = {
      drawer: {
        marginTop: Constants.statusBarHeight,
      },
      main: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#e0e0e0',
        marginTop: Constants.statusBarHeight,
      },
    };

您可以为 safeAreaView 使用任何颜色，它会应用于状态栏。有关详细信息，请访问 https://medium.com/reactbrasil/react-native-set-different-colors-on-top-and-bottom-in-safeareaview-component-f008823483f3

Answer 2

因为你的代码给你一个marginTop和状态高度线一样高的，它必须是白色，这是基本颜色。

您可以删除 style.drawer 和 marginTop

const drawerStyles: DrawerStyles = {
  main: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#e0e0e0'
  },
};

React Native Drawer 更改状态栏的颜色

React Native Drawer change color of status bar

react-native

expo

react-native-drawer