Добавьте заполнение в пользовательский contentComponent для DrawerNavigator, чтобы избежать наложения строки состояния

Question

При использовании базового DrawerNavigator существует правильный paddingTop, который позволяет избежать наложения контента на строку состояния;однако при добавлении пользовательского contentComponent заполнение отсутствует.Код: https://github.com/myplaceonline/testreactexpo/tree/drawermargin

Без пользовательского контента. Компонент на Android:

С пользовательским контентом. Компонент на Android:

Я могу добавить явный запас, но какое значение выбрать?Я уже использую 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

Решено с:

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