如何在抽屉式导航器中添加自定义抽屉，反应导航4.x？

Question

我在使用自定义抽屉导航器时遇到问题。互联网上的所有方法都无法使用较低版本的反应导航。这是我的代码

import { createAppContainer,DrawerItems } from 'react-navigation';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';
import {SafeAreaView,ScrollView,Dimensions,View} from 'react-native';

const MyDrawerNavigator = createDrawerNavigator({ 
  Home: HomeScreen, 
  Settings: SettingsScreen,
},{
  contentComponent:CustomDrawerComponent,
}) 

const CustomDrawerComponent = (props) => {
  <SafeAreaView style={{flex:1}}>
    <View>
      <Image source={{'uri' : 'https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg'}} />
    </View>
    <ScrollView>
      <DrawerItems {...props} />

    </ScrollView>
  </SafeAreaView>
}

const AppContainer = createAppContainer(MyDrawerNavigator);

export default AppContainer;

代码无需自定义抽屉即可正常工作。但是，当我添加自定义抽屉时，侧栏上的链接不会出现。侧栏为空。

Answer 1

您需要将导入更改为从react-navigation-drawer导入。

如果使用react-navigation-drawer 1.x：

import { DrawerItems } from 'react-navigation-drawer';

[如果您使用的是react-navigation-drawer 2.x，请改用DrawerNavigatorItems：

import { DrawerNavigatorItems as DrawerItems } from 'react-navigation-drawer';

始终阅读官方文档：https://reactnavigation.org/docs/en/drawer-navigator.html#providing-a-custom-contentcomponent