React Native函数式组件下多独立.js文件页面导航实现咨询

问题根因 #

你的代码存在以下核心错误，直接导致navigate方法调用失败：

1. 导出的navigation变量从未被赋值，仅作为NavigationService组件的形参存在，导出后默认为undefined，调用navigate方法自然报错
2. 未导入CameraScreen就直接在栈配置中使用，会额外触发变量未定义的报错
3. 把导航栈组件直接当成工具类调用，不符合React Navigation的使用逻辑

修复方案 #

这里提供两种适配函数式组件的实现方式，你可以按需选择：

方案1：使用官方原生useNavigation钩子（更简单，适配绝大多数场景）

这种方式不需要额外封装导航服务，React Navigation原生支持函数组件直接调用，符合官方最佳实践：

步骤1：调整NavigationService.js为纯导航栈配置

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// 补全所有页面导入
import EmailScreen from './Email';
import HomeScreen from './HomeScreen'; // 注意原来的App.js改名为HomeScreen.js，避免和入口文件冲突
import CameraScreen from './Camera'; // 补全你缺失的导入

const Stack = createNativeStackNavigator();
  
export default function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Camera" component={CameraScreen} />
        <Stack.Screen name="Email" component={EmailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

步骤2：修改项目入口文件（比如根目录的index.js）

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

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

步骤3：页面中直接调用useNavigation钩子跳转

以HomeScreen.js（原App.js）为例：

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Button } from 'react-native-elements';
// 导入官方钩子
import { useNavigation } from '@react-navigation/native';

function HomeScreen() {
  // 初始化导航实例
  const navigation = useNavigation();
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' }}>
      <Button 
        buttonStyle={styles.cameraButton} 
        titleStyle={styles.buttonText}
        onPress={() => navigation.navigate('Email')}
        title="Email pics"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  cameraButton: {
    backgroundColor: 'red',
  },
  buttonText: {
    fontSize: 24
  }
});

export default HomeScreen;

方案2：封装全局NavigationService（适合非组件场景调用导航）

如果你需要在工具函数等非组件文件里调用导航，可以按以下方式封装：

步骤1：重写NavigationService.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// 补全导入
import EmailScreen from './Email';
import HomeScreen from './HomeScreen';
import CameraScreen from './Camera';

const Stack = createNativeStackNavigator();
// 创建全局导航引用
export const navigationRef = React.createRef();

// 封装全局导航方法
export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}
export function goBack() {
  navigationRef.current?.goBack();
}
// 可按需扩展pop、popToTop等其他导航方法

// 导出导航栈组件
export default function AppNavigator() {
  return (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Camera" component={CameraScreen} />
        <Stack.Screen name="Email" component={EmailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

步骤2：修改项目入口文件和方案1一致，注册AppNavigator作为根组件

步骤3：页面中引入服务调用

以HomeScreen.js为例：

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Button } from 'react-native-elements';
// 导入封装的导航方法
import { navigate } from './NavigationService';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' }}>
      <Button 
        buttonStyle={styles.cameraButton} 
        titleStyle={styles.buttonText}
        onPress={() => navigate('Email')}
        title="Email pics"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  cameraButton: {
    backgroundColor: 'red',
  },
  buttonText: {
    fontSize: 24
  }
});

export default HomeScreen;

注意事项 #

• 所有页面组件不需要额外改动，双向跳转直接调用对应导航方法传目标页面的name即可
• 不要重复在多个文件里声明NavigationContainer，全局只能有一个根导航容器

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