reactjs - 反应导航覆盖抽屉安全区域视图

Question

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

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

我尝试通过在组件/视图中包含以下内容来覆盖，<SafeAreaView></SafeAreaView>但它最终具有重复的SafeAreaViewUI。这意味着它附加另一个SafeAreaView而不是覆盖默认内置SafeAreaView的react-navigation.

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

标签： reactjsreact-nativereact-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>
  );
};