Как добавить пользовательский ящик в trayNavigator, реагировать на навигацию 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

Answer 2

Вместо этого

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

я создал новый реактивный компонент

class CustomDrawerComponent React.Componect{
 render(){
return(
  <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>
)
}
}

это сработало