Question

我正在使用React Native Drawer软件包。使用它时，iOS状态栏的背景颜色更改为白色。

这是我的代码示例：

此处提供了该演示：https://snack.expo.io/@dennismadsen/react-native-drawer-status-bar-issue

bar

如何解决此问题并使背景自动使用内容区域中的灰色背景？如果我从渲染方法中删除了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> ); }，状态栏的背景颜色将变为预期的灰色。

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

由于您的代码为您提供了Sales_ID Company_Name_x Company_Name_y 1 12345 AAA BBB 2 12345 AAA CCC 5 12345 BBB CCC 10 98765 KKK MMM 14 56321 JJJ SSS 15 56321 JJJ PPP 18 56321 PPP SSS到状态高度线的高度，因此它必须为白色，这是基本颜色。

您可以删除marginTop和style.drawer

marginTop

React Native Drawer更改状态栏的颜色

2 个答案: