Question

TypeError：未定义不是一个对象（评估“props.navigation.navigate”）

2021-09-27

2053

react-native

我正在使用 react-navigator 4.x，并且只有一个页面需要导航，但是当我在照片页面中单击 <Button onPress={() => {props.navigation.navigate({ routeName: 'Login' })}} title="Go To" /> 时，出现此错误：

import React, { useEffect, useRef } from 'react';
import { View, Button, Text, StyleSheet, TouchableOpacity } from 'react-native';
import 'react-native-gesture-handler';


const NextButton = props => {

    return (

        <View>
            <Button onPress={() => {
                props.navigation.navigate({ routeName: 'Login' })
            }} title="Go To" />
        </View>
    );
}
export default NextButton;


import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import Onboarding from "../components/Onboarding";
import Login from './../screens/Login';

const AppNavigator = createStackNavigator({
    Intro: Onboarding,
    Login: Login,
});

export default createAppContainer(AppNavigator);

Answer 1

您的 NextButton 实际上不是导航堆栈的一部分，因此 props.navigation 将未定义，除非您将其作为 prop 从屏幕传递，因此错误 TypeError：undefined 不是对象（评估“props.navigation.navigate”）。

要在 NextButton 组件内获取导航，您可以将其作为 prop 从您正在渲染 NextButton 的屏幕传递。或者，由于您使用的是旧版本的库，您可以使用 withNavigation HOC 包装您的 NextButton 以访问 navigation props。

import { withNavigation } from 'react-navigation';

const NextButton = props => {
  return (
    <View>
      <Button 
        onPress={() => {
          props.navigation.navigate({ routeName: 'Login' })
        }} 
        title="Go To" 
      />
    </View>
  );
}
export default withNavigation(NextButton);

Answer 2

使用 NavigationContainer 代替 createAppContainer ，我认为这从 v4 到 v5 有所变化。

import { NavigationContainer } from '@react-navigation/native';