React Native 同页面双组件使用React Navigation导航失效问题

• 语法错误：Diet组件里onPress属性的JSX括号未闭合，代码根本过不了编译
• 依赖导入缺失：代码中使用的View、TouchableOpacity、Text属于React Native核心内置组件，未从react-native模块导入，运行时直接触发未定义组件报错
• navigation对象获取逻辑错误：你在Diet类组件的代码块里直接裸写全局变量navigation，当前作用域根本不存在这个变量。React Navigation注入的对象需要从组件的props链上获取，不是全局可直接调用的
• 导航基础配置完全缺失：React Navigation的跳转能力必须依托导航容器、路由注册流程才能生效，你既没有初始化导航实例，也没有把两个组件注册为可跳转的路由目标，就算语法全对，也找不到要跳转的页面

1. 补全所有必要的导入 #

首先把缺失的基础组件、导航核心依赖补全，修正后的导入部分：

import React, { Component } from "react";
// 补全缺失的React Native核心组件导入
import { View, TouchableOpacity, Text } from "react-native";
// 导入React Navigation核心依赖，需要提前安装好对应的npm包
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import {
  Left,
  Right,
  Icon,
  Container,
  Header,
  Body,
  Button,
  Title,
} from "native-base";

2. 修正两个组件的内部逻辑 #

Food函数组件的写法本身没问题——因为函数组件被注册为路由页面时，React Navigation会自动把navigation对象作为props传入，直接解构使用即可。
只需要修正Diet类组件的取值逻辑，把裸写的全局navigation换成从this.props上取注入的对象，同时补全缺失的语法括号：

export class Diet extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate("Food")}
        >
          <Text style={{ fontSize: 18 }}>跳转到Food页面</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

新手提示：如果后续把类组件嵌在自定义子组件里拿不到props上的navigation，可以用React Navigation提供的withNavigation高阶组件包裹组件，不用在嵌套层级里一层层手动透传navigation对象。

3. 完成导航注册配置 #

这是新手最容易漏的核心步骤：必须初始化导航容器，把两个组件和对应的路由名称绑定，跳转逻辑才能找到目标页面。补全的导航入口代码：

// 初始化栈导航实例
const Stack = createNativeStackNavigator();

// 导出页面根组件
export default function NutritionPage() {
  return (
    <NavigationContainer>
      {/* 设置初始进入的页面 */}
      <Stack.Navigator initialRouteName="Diet">
        {/* 路由名要和跳转方法里传的name参数完全一致 */}
        <Stack.Screen name="Diet" component={Diet} />
        <Stack.Screen name="Food" component={Food} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

注意：这里定义的路由名称必须和navigate方法里传入的字符串完全匹配，大小写、拼写不一致都会触发跳转失败。

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