React Native项目无法解析@react-navigation/native模块问题求助

问题原因 #

你的代码中导入了@react-navigation/native的useNavigation钩子，但该模块未在项目中安装，导致解析失败。

解决步骤 #

1. 安装必要依赖 #

在项目根目录执行以下命令安装核心导航包及依赖：

使用npm：

npm install @react-navigation/native react-native-screens react-native-safe-area-context

使用yarn：

yarn add @react-navigation/native react-native-screens react-native-safe-area-context

2. iOS项目额外配置 #

进入iOS目录并安装Pods：

cd ios && pod install && cd ..

3. Android项目额外配置 #

打开android/app/src/main/java/[你的包名]/MainActivity.java（Kotlin项目对应MainActivity.kt），修改createReactActivityDelegate方法：

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
  return new ReactActivityDelegate(this, getMainComponentName()) {
    @Override
    protected ReactRootView createRootView() {
      return new RNGestureHandlerEnabledRootView(MainActivity.this);
    }
  };
}

4. 配置导航上下文 #

useNavigation必须在NavigationContainer的上下文内使用，修改你的App.tsx，用NavigationContainer包裹整个组件：

import React from "react";
import { View, Text, StyleSheet, SafeAreaView } from "react-native";
import { useNavigation, NavigationContainer } from '@react-navigation/native';

import Icon from 'react-native-vector-icons/FontAwesome';
import Ionicons from 'react-native-vector-icons/Ionicons';

import Button from './components/Button';
import InputFeild from './components/InputFeild';

const App = () =>{
    const navigation = useNavigation();

    return(
        <NavigationContainer>
            <SafeAreaView style={styles.container}>
                <View style={styles.emptyProfile}>
                    <Ionicons name="person-outline"  size={50}/>
                </View>
                <View style={styles.inputFeilds}>
                    <InputFeild name="user_name" banner="at-outline" secutiry={false}/>
                    <InputFeild name="password" banner="lock-closed-outline" secutiry={true}/>
                </View>
                <View style={styles.actions}>
                    <Button buttonIcon="log-in-outline" text="Sign In" buttonActivated={true}/>
                    <Button buttonIcon="person-add-outline" text="New user? Sign Up" buttonActivated={false} 
                        onPress={() => {
                            
                        }}
                    />
                </View>
            </SafeAreaView>
        </NavigationContainer>
    );
};

export default App;

5. 重启项目 #

安装完成后，重启Metro服务并重新运行项目，确保依赖生效。

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