React Native 运行环境安装：0.6以下/以上版本的新老项目都适用_app开发工程师V帅

大大的周 02-07 6023

用新环境运行老RN项目，或者换电脑运行RN项目，环境配置不对会引起项目无法执行，建议先重新安装环境，然后执行（因为RN项目的运行?与本地环境，终端脚本执行顺序，模拟器版本等都有关系）。

1.卸载Homebrew? 并重新安装

? ?1.1先卸载Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"

? 1.2?然后再安装

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

参考链接：https://·blogs.com/everlose/p/12846234.html

2.3 安装node :

brew install node

2.4 ? 安装 watchman

brew install watchman

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。如果你已经安装了 Node，请检查其版本是否在 v12 以上。

安装完 Node 后建议使用科学上网工具加速后面的过程，使用淘宝镜像也不可靠，但如果没有钱买代理可以尝试使用淘宝的镜像：

# 使用nrm工具切换淘宝源 npx nrm use taobao # 如果之后需要切换回官方源可使用 npx nrm use npm

注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

2.5 如果你发现你的终端执行脚本的时候出现 cnpm *** ?*** 开头的，一定要替换为 ?npm ?或者 yarn。

2.6?Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名

可参考RN中文网：https://·/docs/environment-setup

3. 下载官网Node?

如果多次下载不成功，还可以从官网下载，参考链接：https://zhuanlan.zhihu.com/p/99841609?

4 .打开你的RN项目：

找到 package.json文件：

把这段代码粘贴进去：

"scripts": { "0-清除安卓build文件": "rm -r -f ./android/app/build ./android/build", "0-清除苹果build文件": "rm -r -f ./ios/build", "1-清除全部build文件": "rm -r -f ./android/app/build ./android/build ./ios/build", "2-清理冗余": "watchman watch-del-all", "3-升级": "watchman watch-del-all && rm -rf node_modules", "3.1-安装npm": "npm install", "4-关联": "react-native link", "5-替换文件": "cp -r MarkDown/editFile/findMatchingSimulator.js node_modules/react-native/local-cli/runIOS && cp -r MarkDown/editFile/index.js node_modules/native-echarts/src/components/Echarts && cp -r MarkDown/editFile/Ionicons.json node_modules/react-native-vector-icons/glyphmaps && cp -r MarkDown/editFile/Ionicons.ttf node_modules/react-native-vector-icons/Fonts && cp -r MarkDown/editFile/Ionicons.ttf node_modules/native-base/Fonts && cp -r MarkDown/editFile/RCTModuleMethod.mm node_modules/react-native/React/Base", "6-podInstall": "cd ios && pod install", "7-start": "node dev-server.js 8080", "8-运行iOS模拟器": "yarn react-native run-ios", "9-运行Android模拟器": "yarn react-native run-android", "打包安卓": "cd android/ && ./gradlew assembleRelease", "打开APK位置": "open ./android/app/build/outputs/apk/release", "npmUninstall": "npm uninstall --save react-native-device-info@0.22.5", "npmInstall": "npm install --save react-native-device-info@0.22.5", "npmInstalllink": "react-native link react-native-device-info" },

如图：

?执行代码里的1-6步，然后点击

?运行即可；

?5 .

?如果修改RN内容进行热更新而模拟器没变化即?关联不上问题：

* 修改VSCode默认配置文件，点击左下角：齿轮?标志图 -> 设置，搜索框输入： files.autoSave。

* 把"files.autoSave":"off" ? 修改成?"files.autoSave":"onFocusChange"，意思是当编辑器失去焦点的时候就会自动更新文件内容到磁盘。

选择：onFocusChange 重启VScode即可。

可参考：https://blog.csdn.net/qq_38826019/article/details/114644873

6. ?iOS运行模拟器代码报错：

Cannot initialize a parameter of type 'NSArray<id<RCTBridgeModule>> *' with an lvalue of type 'NSArray<Class> *__strong' Cannot initialize a parameter of type 'NSArray<Class> *' with an lvalue of type 'NSArray<id<RCTBridgeModule>> *__strong' Cannot initialize a parameter of type 'NSArray<id<RCTBridgeModule>> *' with an rvalue of type 'NSArray<Class> *'

这是由于升级XCode 12.5之后的问题，在ios/Podfile文件中加入如下的脚本即可：

post_install do |installer| ## Fix for XCode 12.5 find_and_replace( "../node_modules/react-native/React/CxxBridge/RCTCxxBridge.mm", "_initializeModules:(NSArray<id<RCTBridgeModule>> *)modules", "_initializeModules:(NSArray<Class> *)modules") find_and_replace( "../node_modules/react-native/ReactCommon/turbomodule/core/platform/ios/RCTTurboModuleManager.mm", "RCTBridgeModuleNameForClass(module))", "RCTBridgeModuleNameForClass(Class(module)))" ) end def find_and_replace(dir, findstr, replacestr) Dir[dir].each do |name| text = File.read(name) replace = text.gsub(findstr,replacestr) if text != replace puts "Fix: " + name File.open(name, "w") { |file| file.puts replace } STDOUT.flush end end Dir[dir + '*/'].each(&method(:find_and_replace)) end

然后，重新执行pod install?命令安装即可。也可以使用12.0 获取其他低版本xcode 开发工具。

参考链接：https://`/article/211935.htm