реагировать навигация v5 пользовательский маршрут ящика

Question

Я создал пользовательский компонент ящика с некоторыми кнопками для перехода на другие экраны, но я получаю Ошибка типа: undefined не является объектом (оценивается _this.props ') , когда я нажимаю на кнопки ящика .Но если удалить компонент пользовательского ящика, ящик по умолчанию будет работать нормально.

как решить проблему? спасибо

Ящик

import React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationNativeContainer} from '@react-navigation/native';

import p1 from '../wiki/p1';
import Main from '../wiki/Main';
import p2 from '../wiki/p2';

import CustomDrawer from '../screens/CustomDrawer';

const Drawer = createDrawerNavigator();

const DrawerNavigation = () => {
  return (
    <NavigationNativeContainer independent={true}>
      <Drawer.Navigator
        drawerType="front"
        initialRouteName="Main"
        drawerContent={() => <CustomDrawer />}>
        <Drawer.Screen name="Main" component={Main} />
        <Drawer.Screen name="p1" component={p1} />
        <Drawer.Screen name="p2" component={p2} />
      </Drawer.Navigator>
    </NavigationNativeContainer>
  );
};

экспорт по умолчанию DrawerNavigation;

CustomDrawer

import React, {Component} from 'react';
import {Text, View, Button} from 'react-native';

const CustomDrawer = () => {
  return (
    <View>
      <Button
        title="Main"
        onPress={() => this.props.navigation.navigate('Main')}
      />

      <Button
        title="p1"
        onPress={() => this.props.navigation.navigate('p1')}
      />

      <Button
        title="p2"
        onPress={() => this.props.navigation.navigate('p2')}
      />

    </View>
  );
};

export default CustomDrawer;

p1

import React, {Component} from 'react';
import {Text, View, Button} from 'react-native';

const p1 = ({navigation}) => {
  return (
    <View>
      <Text> p1 </Text>
      <Button title="GoBack" onPress={() => navigation.navigate('Main')} />
      <Button title="Goback" onPress={() => navigation.goback()} />
    </View>
  );
};

export default p1;

Answer 1

наконец-то нашел решение, я не передаю navigation в Custom Drawer

const CustomDrawer = ({navigation}) => {
  return (
    <View>
      <Button
        title="Main"
        onPress={() => this.props.navigation.navigate('Main')}
      />

      <Button
        title="p1"
        onPress={() => this.props.navigation.navigate('p1')}
      />

      <Button
        title="p2"
        onPress={() => this.props.navigation.navigate('p2')}
      />

    </View>
  );
};

Answer 2

Вы должны передать props в свой ящик, как показано ниже:

<NavigationNativeContainer independent={true}>
  <Drawer.Navigator
    drawerType="front"
    initialRouteName="Main"
    drawerContent={(props) => <CustomDrawer {...props} />}> // pass props here
    <Drawer.Screen name="Main" component={Main} />
    <Drawer.Screen name="p1" component={p1} />
    <Drawer.Screen name="p2" component={p2} />
  </Drawer.Navigator>
</NavigationNativeContainer>

Answer 3

Смотрите документацию по ссылке: https://reactnavigation.org/docs/en/drawer-navigator.html

const Drawer = createDrawerNavigator();

const DrawerNavigation = () => {
 return (
  <NavigationNativeContainer independent={true}>
  <Drawer.Navigator
    drawerType="front"
    initialRouteName="Main"
    drawerContent={props => CustomDrawer(props)}
    drawerContentOptions={{
      inactiveTintColor: '',
      activeTintColor: '',
      labelStyle: '',
      itemStyle: {},
    }}>
    <Drawer.Screen
      name="Main"
      component={Main}
      options={{
        drawerIcon: () => <Svg />,
      }}
    />
    <Drawer.Screen
      name="p1"
      component={p1}
      options={{
        drawerIcon: () => <Svg />,
      }}
    />
    <Drawer.Screen
      name="p2"
      component={p2}
      options={{
        drawerIcon: () => <Svg />,
      }}
    />
     </Drawer.Navigator>
   </NavigationNativeContainer>
   );
};

 // this may work but is not ok
  const CustomDrawerBefore = props => {
  return (
      <View>
     <Button title="Main" onPress={() => props.navigation.navigate('Main')} />

     <Button title="p1" onPress={() => props.navigation.navigate('p1')} />

     <Button title="p2" onPress={() => props.navigation.navigate('p2')} />
      </View>
  );
  };

 // this is I think the recommended way
const CustomDrawer = props => {
  return (
   <View>
    <View>Custom things header</View>
   <DrawerItemList {...props} />
  </View>
 );
};