时间戳

首页 > 解决方案 > 如何在drawerNavigator中添加自定义抽屉，反应导航4.x？

react-native - 如何在drawerNavigator中添加自定义抽屉，反应导航4.x？

问题描述

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

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;

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

标签： react-nativereact-navigation

解决方案

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

如果您使用的是react-navigation-drawer1.x：

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

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

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

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

推荐阅读