35、自动化：升级0.72新架构的步骤和关键

$ npx react-native upgrade

ERROR Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.

// 先删除相关的依赖性，然后重新安装
$ yarn add @react-navigation/bottom-tabs @react-navigation/devtools @react-navigation/drawer ...

ERROR Error: [Reanimated] The native part of Reanimated doesn't seem to be initialized. This could be caused by - not rebuilding the app after installing or upgrading Reanimated - trying to run Reanimated on an unsupported platform - running in a brownfield app without manually initializing the native library, js engine: hermes LOG Running "RN72" with {"rootTag":341}

// 重新安装 Android 依赖
$ cd android 
$ /gradlew build --refresh-dependencies
// 清除 JavaScript 构建缓存
$ cd ../
$ npx react-native start --reset-cache
// 按键盘 a 键，重新安装 Android 包

ERROR Error: GestureDetector must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized

// 修改 android/gradle.properties 文件中的变量
newArchEnabled=true

// 运行命令依赖安装和构建的命令
$ ./gradlew build --refresh-dependencies

# Run pod install with the flag:
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install

const navigationDeps = {
"@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/devtools": "^6.0.19",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/material-bottom-tabs": "^6.2.16",
    "@react-navigation/material-top-tabs": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@react-navigation/stack": "^6.3.17",
		"react-native-safe-area-context": "^4.6.3",
    "react-native-screens": "^3.22.0",
}

// 伪代码
if (includes('package.json', 'react-navigation')) {
  addDeps('package.json', navigationDeps)
  removeDeps('package.json', ['react-navigation'])
}
function mergePackage (rootPath) {
  // 1. 读取项目package.json
  const toPkgPath = resolveRootPath(rootPath, 'package.json');
  const toPkg = require(toPkgPath);
  // 2. 合并更新配置
  const newPkg = mergePkg(toPkg, fromPkg);
  // 3. 将新配置写入package.json
  fs.writeFileSync(toPkgPath, JSON.stringify(newPkg, null, 2));
}

// 升级前
import { WebView } from 'react-native'

// 升级后
import { WebView } from 'react-native-webview'

我正在对 JavaScript 项目的代码进行升级，请你使用 JSCodeshift 写一段代码，对该项目下 case 目录的所有文件应用升级规则，直接进行代码替换。升级规则如下：
// 升级前 
import { WebView } from 'react-native'
// 升级后 
import { WebView } from 'react-native-webview'

const fs = require('fs');
const path = require('path');
const j = require('jscodeshift');

// 更新导入声明的函数
function updateImportDeclaration(j, root) {
  root
    .find(j.ImportDeclaration) // 查找所有的导入声明
    .filter((path) => path.node.source.value === 'react-native') // 筛选出源代码值为 'react-native' 的导入声明
    .forEach((path) => {
      const webViewSpecifier = path.node.specifiers.find(
        (specifier) => specifier.imported.name === 'WebView'
      ); // 找到导入的 WebView
      if (webViewSpecifier) {
        webViewSpecifier.imported.name = 'WebView'; // 将导入的 WebView 改为新的名字
        path.node.source.value = 'react-native-webview'; // 将导入的源代码值改为新的模块名
      }
    });
}

// 更新代码的函数
function updateCode(code) {
  const ast = j(code); // 将代码解析为抽象语法树（AST）
  const root = ast.find(j.Program); // 找到 AST 的根节点
  updateImportDeclaration(j, root); // 调用函数更新导入声明
  return ast.toSource(); // 将 AST 转换回代码
}

// 处理单个文件的函数
function processFile(file) {
  const filePath = path.resolve(file); // 获取文件的绝对路径
  const code = fs.readFileSync(filePath, 'utf-8'); // 读取文件内容
  const upgradedCode = updateCode(code); // 调用函数更新代码
  fs.writeFileSync(filePath, upgradedCode, 'utf-8'); // 将更新后的代码写回文件
}

// 递归处理目录下的所有文件
function processDirectory(directory) {
  fs.readdirSync(directory).forEach((file) => {
    const filePath = path.join(directory, file); // 获取文件的完整路径
    const stats = fs.statSync(filePath); // 获取文件的状态信息
    if (stats.isFile() && file.endsWith('.js')) {
      processFile(filePath); // 如果是文件且以 .js 结尾，调用处理单个文件的函数
    } else if (stats.isDirectory()) {
      processDirectory(filePath); // 如果是目录，递归处理子目录
    }
  });
}

const srcDirectory = path.resolve('case'); // 目标文件夹的路径
processDirectory(srcDirectory); // 调用处理目录的函数，开始处理所有文件