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;

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>

Answer 2

最终找到了解决方案，我没有在自定义抽屉中传递using System.Reflection; /* ... */ CalculateSomething(points, typeof(Point).GetProperty("propertyName"));

navigation

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

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

3 个答案: