React Native添加日期选择器后启动卡住、npm依赖冲突报错求助

• React Native项目此前运行正常，新增日历图标、日期选择器相关代码初期可正常启动，后续经未知操作后，安卓模拟器无法正常打开应用
• 执行react-native run-android时构建、APK安装流程显示成功，但应用拉起失败
• 执行npm安装依赖操作时出现依赖树解析失败报错

import React, {useState,  useContext}  from 'react';
import {View, Text,StyleSheet,ScrollView,TouchableOpacity,
  Button,
  Platform,
  TextInput} from 'react-native';
import {AuthContext} from '../context/AuthContext';
import { BASE_URL } from '../utils/config';

import Ionicons from 'react-native-vector-icons/Ionicons';
import DatePicker from 'react-native-date-picker';

import Constants from "expo-constants";
import CustomButton from '../components/CustomButton'
import axios from "axios";

react-native run-android执行日志 #

>react-native run-android

info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
(node:10340) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency      
(Use `node --trace-warnings ...` to show where the warning was created)
Jetifier found 2800 file(s) to forward-jetify. Using 12 workers...
info JS server already running.
info Installing the app...

> Task :app:installDebug
Installing APK 'app-debug.apk' on 'android29(AVD) - 10' for app:debug
Installed on 1 device.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.

BUILD SUCCESSFUL in 8s
154 actionable tasks: 4 executed, 150 up-to-date
info Connecting to the development server...
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.reactnavigationv6/.MainActivity }

环境信息（react-native info输出） #

System:
        OS: Windows 10 10.0.19044
        CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400H @ 2.70GHz
        Memory: 1.91 GB / 15.71 GB
      Binaries:
        Node: 16.15.0 - C:\Program Files\nodejs\node.EXE      
        Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD        
        npm: 8.12.2 - C:\Program Files\nodejs\npm.CMD
        Watchman: Not Found
      SDKs:
        Android SDK: Not Found
      IDEs:
        Android Studio: AI-212.5712.43.2112.8609683
      Languages:
        Java: 11.0.15
        Python: 3.9.11
      npmPackages:
        @react-native-community/cli: Not Found
        react: 17.0.2 => 17.0.2
        react-native: ^0.63.2 => 0.63.2
      npmGlobalPackages:
        *react-native*: Not Found

npm依赖安装报错 #

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: reactnavigationv6@0.0.1
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.13.1" from react-native@0.63.4    
npm ERR! node_modules/react-native
npm ERR!   react-native@"^0.63.2" from the root project   
npm ERR!   peer react-native@"*" from @react-native-community/cli@8.0.2
npm ERR!   node_modules/@react-native-community/cli       
npm ERR!     @react-native-community/cli@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry   
npm ERR! this command with --force, or --legacy-peer-deps 
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\ghars\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:      
npm ERR!     C:\Users\ghars\AppData\Local\npm-cache\_logs\2022-06-22T17_29_53_171Z-debug-0.log

• 核心问题定位：npm抛出的ERESOLVE报错已经明确指向依赖版本冲突，当前项目使用的react-native@0.63.x版本要求peer依赖为react@16.13.1，但项目中实际安装的react版本为17.0.2，版本不兼容会导致JS层运行时崩溃，这也是APK安装成功但应用无法拉起的直接原因。该冲突大概率是后续安装日期选择器、图标库等新依赖时，npm默认的严格peer依赖校验逻辑自动升级了react版本导致的。
• 构建日志显示BUILD SUCCESSFUL仅代表安卓原生层打包、安装流程无语法错误，不代表JS层依赖可正常加载。
• 环境信息中Android SDK未识别、Watchman未安装属于配置不完整问题，不会直接导致本次启动失败，但会提升后续构建、调试的异常概率。

按以下顺序操作即可解决问题：

1. 清理现有依赖缓存
   • 关闭所有本地运行的metro服务、模拟器进程
   • 删除项目根目录下的node_modules文件夹、package-lock.json文件
2. 修复依赖版本匹配问题
   • 打开项目根目录的package.json文件，将react版本修改为和RN0.63适配的版本："react": "16.13.1"，如果不想降级react，可将react-native升级到0.64及以上适配React 17的版本，但是改动量更大，优先选择降级react
   • 确认新增的第三方依赖版本适配RN0.63：react-native-date-picker选择4.x版本，react-native-vector-icons选择7.x及以下版本，过高版本会要求更高的RN环境
   • 执行依赖安装命令：npm install --legacy-peer-deps，该参数会跳过npm v7+默认的严格peer依赖校验，兼容老版本RN项目的依赖安装逻辑
3. 补全新增依赖的原生配置
   • 打开android/app/build.gradle文件，在文件末尾添加图标库的打包配置，确保图标资源可正常打包到APK中：

     apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
     

   • 清理安卓构建缓存：进入android目录执行.\gradlew clean（Windows环境）
4. 重新启动项目
   • 回到项目根目录执行npx react-native start --reset-cache启动metro服务，清空缓存
   • 新开终端执行react-native run-android重新构建安装应用
5. 可选环境优化
   • 配置Android SDK的系统环境变量，确保react-native info可正常识别SDK路径，避免后续构建出现SDK找不到的问题
   • 如果启动后仍有崩溃，执行adb logcat *:E抓取安卓系统级错误日志，定位具体的原生模块加载问题

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