反应导航覆盖抽屉safeareaview

Question

我该如何覆盖/自定义SafeAreaView / react-navigation附带的默认react-navigation-drawer。

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

我尝试通过将<SafeAreaView></SafeAreaView>括在组件/视图中来进行覆盖，但最终却有重复的SafeAreaView UI。这意味着它将附加另一个SafeAreaView而不是覆盖SafeAreaView的{​​{1}}中内置的默认值。

react-navigation

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>
  );
};