React Native Drawer改变状态栏的颜色答案

【问题标题】：React Native Drawer change color of status barReact Native Drawer改变状态栏的颜色
【发布时间】：2019-07-23 18:43:25
【问题描述】：

我正在使用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，状态栏的背景颜色会按预期变为灰色。

【问题讨论】：

标签： react-native expo react-native-drawer

【解决方案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

【讨论】：

【解决方案2】：

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

您可以删除style.drawer 和marginTop

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

【讨论】：