javascript - react 导航 v5 自定义抽屉路线

Question

我创建了一个自定义抽屉组件，其中包含一些按钮来导航到其他屏幕，但我得到一个 类型错误:未定义不是对象(评估“_this.props”)当我单击抽屉按钮时。但如果我删除自定义抽屉组件，默认抽屉就可以正常工作。

如何解决问题？谢谢你

Drawer

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

你必须通过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>