React Native运行报navigation.navigate undefined错误问题求助

• 核心问题1：react-navigation 3.x及以上版本强制要求所有导航器必须用createAppContainer包裹后才能作为根组件使用，你定义的AppStackNavigator没有做这层处理
• 核心问题2：你直接将App.js作为项目根组件注册，没有使用你定义的导航栈作为根组件，导致App组件的props中没有被注入navigation属性，调用navigation.navigate时自然触发undefined报错
• 次要问题：App.js中使用了Image组件但未从react-native中导入，会额外触发组件未定义报错

1. 修改navigators/AppNavigators.js #

添加createAppContainer导入，包裹你创建的栈导航器：

import {createStackNavigator, createAppContainer} from 'react-navigation'
import App from '../App'
import Jwxt from '../page/Jwxt'

const AppStackNavigator=createStackNavigator({
    App:{
        screen:App
    },
    Jwxt:{
        screen:Jwxt
    }
})
// 导出包裹后的导航容器作为根组件使用
export default createAppContainer(AppStackNavigator)

2. 修改项目根入口文件（一般为根目录下的index.js） #

将注册的根组件替换为你定义的导航容器：

import {AppRegistry} from 'react-native';
import AppNavigator from './navigators/AppNavigators';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => AppNavigator);

3. 修复App.js的缺失导入 #

在react-native的导入列表中加入Image组件：

import React, { Component } from 'react';
import {Text, View, TouchableOpacity, Image} from 'react-native';

如果你确实需要保留App.js作为根组件，可以用withNavigation高阶组件包裹App组件，主动注入navigation属性：

// App.js末尾添加
import { withNavigation } from 'react-navigation';

// 原有组件代码
export default withNavigation(App);

内容的提问来源于stack exchange，提问作者IveTien