反应导航v5自定义抽屉路线

Question

我用一些按钮创建了一个自定义抽屉组件，以导航到其他屏幕，但是当我点击抽屉按钮时，我得到了一个TypeError：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;

我用一些按钮创建了一个自定义的抽屉组件，以导航到其他屏幕，但是我收到TypeError：当我单击抽屉时，undefined不是对象（评估'_this.props'...）>

Answer 1

您必须将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>