React导航覆盖抽屉安全区域视图

Question

如何覆盖/自定义随react-navigation/react-navigation-drawer提供的默认SafeAreaView。

来源：https://reactnavigation.org/docs/en/handling-iphonex.html

我试图通过在组件/视图中封装如下所示的<SafeAreaView></SafeAreaView>来进行覆盖，但它最终具有重复的SafeAreaView UI。这意味着它附加了另一个SafeAreaView，而不是覆盖react-navigation的默认内置SafeAreaView。

<SafeAreaView
  style={{flex: 1}}
  forceInset={{ bottom: 'never' }}>
  ...
</SafeAreaView>

Answer 1

您需要为您的抽屉创建一个自定义contentComponent：

const DrawerNavigatorConfig = {
  contentComponent: props => <Menu {...props} />
};
createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);

您将需要实现该Menu组件...可能是这样的：

const Menu = () => {
  return (
    <SafeAreaView
        forceInset={{ top: 'always', bottom: 'never' }}
         style={{flex: 1}}
    >
        ...
    </SafeAreaView>
  );
};