React native - undefined 不是一个对象（'评估 this.props.navigation'）

Posted 2023-04-13

【中文标题】React native - undefined 不是一个对象（\'评估 this.props.navigation\'）

【英文标题】：React native - undefined is not an object ('evaluating this.props.navigation')React native - undefined 不是一个对象（'评估 this.props.navigation'）

【发布时间】：2018-11-12 15:42:19

【问题描述】：

预期行为：应打开一个抽屉，其中包含标题中的菜单图标。

当前行为：错误消息undefined is not an object ('evaluating this.props.navigation')

搜索错误对我没有帮助。

我将导航分成两个文件： RootNavigation.js 和 MainTabNavigation

RootNavigation.js

const AppNavigator = createSwitchNavigator(

  Main: MainTabNavigator,
);
const DrawerStack = createDrawerNavigator(
  Home: 
    screen: AppNavigator
  ,
  Login: 
    screen: login
  ,
  Signup: 
    screen: signup
  
);

export default class RootNavigation extends React.Component 
  componentDidMount() 
    this._notificationSubscription = this._registerForPushNotifications();
  

MainTabNavigation.js

const HomeStack = createStackNavigator(
  Home: HomeScreen,
);

HomeStack.navigationOptions = 
  tabBarLabel: 'Home',
  tabBarIcon: ( focused ) => (
    <TabBarIcon
      focused=focused
      name=
        Platform.OS === 'ios'
          ? `ios-home$focused ? '' : '-outline'`
          : 'md-home'
      
    />
  ),   
;

const LinksStack = createStackNavigator(
  Links: LinksScreen,
);

LinksStack.navigationOptions = 
  tabBarLabel: 'Shops',
  tabBarIcon: ( focused ) => (
    <TabBarIcon
      focused=focused
      name=Platform.OS === 'ios' ? `ios-list$focused ? '' : '-outline'` : 'md-list'
    />
  ),
;

const SettingsStack = createStackNavigator(
  Settings: SettingsScreen,
);

SettingsStack.navigationOptions = 
  tabBarLabel: 'Cart',
  tabBarIcon: ( focused ) => (
    <TabBarIcon
      focused=focused
      name=Platform.OS === 'ios' ? `ios-cart$focused ? '' : '-outline'` : 'md-cart'
    />
  ),
;

export default createBottomTabNavigator(
  HomeStack,
  LinksStack,
  SettingsStack,
);

MainTab 文件，在标题中显示一个图标

static navigationOptions = (navigation) =>(
  title: 'Home',
  headerLeft: <Ionicons 
                name="md-menu" 
                size=25 
                color="blue" 
                style= margin: 7,
                onPress=() => this.props.navigation.navigate('DrawerOpen') 
                />
);

【问题讨论】：

按菜单图标时抽屉未打开：错误类似于：未定义不是对象（'评估_this2.props.navigation

this.props.navigation.navigate('DrawerOpen') 应该是navigation.navigate('DrawerOpen')。

感谢您的回复。我试过navigation.navigate（'DrawerOpen'）。现在没有得到错误。但问题仍然存在：我无法用它打开抽屉。

【参考方案1】：

如文档here 中所述，当navigationOptions 用作函数时，this 不引用组件的实例；所以this.props 不可用。

相反，您需要替换：

this.props.navigation.navigate('DrawerOpen')

与：

navigation.navigate('DrawerOpen')

或者，您可能希望使用 navigation.openDrawer() 帮助程序，如示例 here 中所示，因为导航到 DrawerOpen 意味着您要导航到具有该名称的屏幕。

【讨论】：

我不知道为什么 :D 使用 alter 方法成功了。导航.openDrawer()。在那之前我已经尝试过，但是到那时我遇到了不同的问题。非常感谢你。 #和平

【参考方案2】：

你必须知道这一点，当你创建这样的组件女巫类时

class MyComponent extends ....

如果你想使用任何道具，你必须写这个关键字，例如

this.props.navigation.nvigate()

但是如果你用这样的箭头函数创建组件

const Mycomponent = (props) => 

你不需要这个关键字，对于通话道具你必须这样写

 props.navigation.navigate()

在您的情况下，如果在 Navigation 选项中使用组件，则不需要 this 或 props KeyWord，只需编写

 navigation.navigate()

【讨论】：

感谢您的回复。我已经用@Ezra 的回答解决了我的问题。