向 DrawerNavigator 的自定义 contentComponent 添加填充以避免覆盖状态栏

Question

当使用基本的 DrawerNavigator 时，有适当的 paddingTop 可以避免在状态栏上覆盖内容；但是，在添加自定义 contentComponent 时，填充不存在。代码：https://github.com/myplaceonline/testreactexpo/tree/drawermargin

Android 上没有自定义 contentComponent：

在 Android 上使用自定义 contentComponent：

我可以添加一些显式边距，但我应该选择什么值？我已经在使用 SafeAreaView，但我认为这仅适用于 iOS。

这是代码。评论 contentComponent: CustomDrawerContentComponent, 行以查看工作视图。

import React from 'react';
import { SafeAreaView, ScrollView, Text, View } from 'react-native';
import { createAppContainer, createDrawerNavigator, createStackNavigator, DrawerItems } from 'react-navigation';

class TestScreen extends React.Component {
  static navigationOptions = {
    title: "Test",
  };
  render() {
    return (
      <View style={{flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Test</Text>
      </View>
    );
  }
}

const CustomDrawerContentComponent = props => (
  <SafeAreaView style={{flex: 1}} forceInset={{ top: "always", horizontal: "never" }}>
    <ScrollView>
      <DrawerItems {...props} />
    </ScrollView>
  </SafeAreaView>
);

export default AppDrawer = createAppContainer(
  createDrawerNavigator(
    {
      DrawerTest: {
        screen: createStackNavigator(
          {
            Test: TestScreen
          },
        ),
        navigationOptions: {
          drawerLabel: "Test",
        }
      },
    },
    {
      contentComponent: CustomDrawerContentComponent,
    }
  )
);

<div data-snack-id="@git/github.com/myplaceonline/testreactexpo@drawermargin" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>

Answer 1

解决方法：

import Constants from 'expo-constants';

<ScrollView style={{paddingTop: Constants.statusBarHeight}}>

向 DrawerNavigator 的自定义 contentComponent 添加填充以避免覆盖状态栏

Add padding to a custom contentComponent for a DrawerNavigator to avoid overlaying the status bar

react-native

react-navigation

expo

react-navigation-drawer