React Native从0.69.12升级到0.76.3后功能异常求助

背景 #

已将React Native应用从0.69.12版本升级至0.76.3版本，同步升级所有第三方依赖库并移除废弃无法使用的库。因直接升级频繁出现构建问题，采用新建项目并迁移src代码的方式完成升级，目前应用无法正常运行，需解决以下问题：

问题1：AsyncStorage迁移后无法读取存储变量 #

AsyncStorage从@react-native-community/async-storage迁移到@react-native-async-storage/async-storage后，代码与文档一致，但存储的变量（如.env相关配置）无法读取。

问题2：新版本React Native类声明与实例化的新规范 #

想了解新版本React Native中类的声明与实例化是否有新规范。

旧package.json #

{
  "dependencies": {
    "@react-native-community/async-storage": "~1.12.0",
    "@react-native-community/blur": "^4.3.2",
    "@react-native-community/cli-platform-android": "^8.0.4",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/push-notification-ios": "^1.8.0",
    "@react-native-firebase/analytics": "18.5.0",
    "@react-native-firebase/app": "18.5.0",
    "@react-native-firebase/crashlytics": "18.5.0",
    "@react-native-firebase/messaging": "18.5.0",
    "@react-native-firebase/perf": "18.5.0",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/elements": "^1.2.1",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/stack": "^6.2.0",
    "@unimodules/core": "^7.1.2",
    "accordion-collapse-react-native": "^0.4.0",
    "axios": "^1.3.4",
    "babel-plugin-module-resolver": "^4.1.0",
    "dotenv": "^16.3.1",
    "he": "^1.2.0",
    "jest-haste-map": "^29.7.0",
    "lodash": "^4.17.21",
    "metro-config": "^0.70.1",
    "mobx": "^6.7.0",
    "mobx-react": "^7.6.0",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.34",
    "prop-types": "^15.7.2",
    "qs": "^6.11.2",
    "react": "18.0.0",
    "react-dom": "17.0.2",
    "react-native": "0.69.12",
    "react-native-biometrics": "^2.1.4",
    "react-native-calendar-strip": "^2.0.9",
    "react-native-calendars": "^1.403.0",
    "react-native-check-box": "git+https://github.com/EdsonPaulo/react-native-check-box/tree/master",
    "react-native-device-info": "^10.8.0",
    "react-native-element-dropdown": "^2.10.0",
    "react-native-error-boundary": "^1.1.3",
    "react-native-exit-app": "^1.1.0",
    "react-native-flipper": "^0.163.0",
    "react-native-gesture-handler": "^2.5.0",
    "react-native-keychain": "^8.1.1",
    "react-native-modal": "^13.0.1",
    "react-native-pinchable": "^0.2.1",
    "react-native-reanimated": "^2.9.0",
    "react-native-reanimated-carousel": "3.4.0",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.14.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-store-review": "^0.4.0",
    "react-native-svg": "^12.3.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-unimodules": "^0.13.3",
    "react-native-vector-icons": "^8.1.0",
    "react-native-web": "~0.13.12",
    "react-native-webview": "^11.23.0",
    "react-navigation": "^4.4.3",
    "rn-async-storage-flipper": "^0.0.10",
    "rn-sliding-up-panel": "^2.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/runtime": "^7.16.7",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/jest": "^29.4.0",
    "@types/lodash": "^4.14.195",
    "@types/qs": "^6.9.10",
    "@types/react": "^18.0.28",
    "@types/react-native": "^0.71.2",
    "@types/react-native-check-box": "^2.1.2",
    "@types/react-native-vector-icons": "^6.4.13",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^27.0.2",
    "eslint": "^7.32.0",
    "jest": "^27.0.3",
    "metro-react-native-babel-preset": "^0.70.3",
    "patch-package": "^7.0.0",
    "react-devtools": "^4.24.1",
    "react-devtools-core": "^4.24.1",
    "react-native-dotenv": "^3.4.7",
    "react-test-renderer": "18.0.0",
    "typescript": "^4.9.5"
  },
  "jest": {
    "preset": "react-native"
  }
}

新package.json #

{
  "dependencies": {
    "@react-native-async-storage/async-storage": "^2.1.0",
    "@react-native-community/blur": "^4.4.1",
    "@react-native-community/cli-platform-android": "^14.0.0",
    "@react-native-community/push-notification-ios": "^1.8.0",
    "@react-native-firebase/analytics": "18.5.0",
    "@react-native-firebase/app": "18.5.0",
    "@react-native-firebase/crashlytics": "18.5.0",
    "@react-native-firebase/messaging": "18.5.0",
    "@react-native-firebase/perf": "18.5.0",
    "@react-native-masked-view/masked-view": "0.3.2",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/elements": "^1.2.1",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/stack": "^6.2.0",
    "@unimodules/core": "^7.1.2",
    "accordion-collapse-react-native": "^1.1.1",
    "axios": "^1.7.9",
    "babel-plugin-module-resolver": "^4.1.0",
    "dotenv": "^16.3.1",
    "he": "^1.2.0",
    "jest-haste-map": "^29.7.0",
    "lodash": "^4.17.21",
    "metro": "^0.79.1",
    "metro-config": "^0.79.1",
    "mobx": "^6.7.0",
    "mobx-react": "^7.6.0",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.34",
    "prop-types": "^15.7.2",
    "qs": "^6.11.2",
    "react": "18.3.1",
    "react-dom": "^18.3.1",
    "react-native": "0.76.3",
    "react-native-biometrics": "^3.0.1",
    "react-native-calendar-strip": "^2.2.6",
    "react-native-calendars": "^1.1307.0",
    "react-native-check-box": "^2.1.7",
    "react-native-device-info": "^10.8.0",
    "react-native-element-dropdown": "^2.12.2",
    "react-native-error-boundary": "^1.2.7",
    "react-native-exit-app": "^2.0.0",
    "react-native-gesture-handler": "^2.21.2",
    "react-native-keychain": "^9.2.2",
    "react-native-modal": "^13.0.1",
    "react-native-pinchable": "^0.2.1",
    "react-native-reanimated": "^3.10.1",
    "react-native-reanimated-carousel": "3.5.1",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-screens": "^3.14.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-store-review": "^0.4.3",
    "react-native-svg": "^15.9.0",
    "react-native-svg-transformer": "^1.5.0",
    "react-native-unimodules": "^0.14.10",
    "react-native-vector-icons": "^10.0.3",
    "react-native-web": "~0.19.13",
    "react-native-webview": "^11.23.0",
    "rn-sliding-up-panel": "^2.4.6"
  },
  "resolutions": {
    "metro": "^0.79.1"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.1",
    "@react-native-community/cli-platform-android": "15.0.1",
    "@react-native-community/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.76.3",
    "@react-native/metro-config": "^0.76.3",
    "@react-native/typescript-config": "0.76.3",
    "@types/jest": "^29.4.0",
    "@types/lodash": "^4.14.195",
    "@types/qs": "^6.9.10",
    "@types/react": "^18.2.6",
    "@types/react-native": "^0.71.2",
    "@types/react-native-check-box": "^2.1.2",
    "@types/react-native-vector-icons": "^6.4.13",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "jest": "^29.6.3",
    "metro-react-native-babel-preset": "^0.70.3",
    "patch-package": "^7.0.0",
    "prettier": "2.8.8",
    "react-devtools": "^4.24.1",
    "react-devtools-core": "^4.24.1",
    "react-native-dotenv": "^3.4.11",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  },
  "packageManager": "yarn@3.6.4"
}

系统信息 #

System:
  OS: macOS 15.3.2
  CPU: (12) arm64 Apple M2 Max
  Memory: 187.80 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 21.5.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK:
    API Levels:
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 34.0.0
      - 35.0.0
    System Images:
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11330709
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.3
    wanted: 0.76.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

问题解决方案 #

针对问题1：AsyncStorage迁移后无法读取存储变量 #

1. 验证存储键名一致性
   确认代码中使用的存储键名和旧项目完全一致，新库@react-native-async-storage/async-storage没有默认前缀，若旧库曾自定义前缀，需同步到新代码中。

2. 清理应用缓存
   新库的存储路径与旧库不同，旧存储数据不会自动迁移。卸载应用后重新安装，或在调试模式下调用AsyncStorage.clear()清空旧数据，再重新存储测试。

3. 检查异步操作逻辑
   确保读取操作在存储完成后执行，使用async/await或Promise链式调用，避免同步读取未完成的存储操作：

   // 正确示例
   const saveEnvConfig = async () => {
     await AsyncStorage.setItem('API_URL', process.env.API_URL);
   };
   
   const getEnvConfig = async () => {
     const url = await AsyncStorage.getItem('API_URL');
     console.log(url);
   };
   

4. 检查.env变量注入配置
   确认react-native-dotenv的babel配置正确，在babel.config.js中确保插件顺序正确，且module-resolver不会干扰变量注入：

   module.exports = {
     presets: ['module:@react-native/babel-preset'],
     plugins: [
       ['module:react-native-dotenv', {
         moduleName: '@env',
         path: '.env',
         blacklist: null,
         whitelist: null,
         safe: false,
         allowUndefined: true