React Native 运行环境安装：0.6以下/以上版本的新老项目都适用

用新环境运行老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://www.jianshu.com/p/133705e0ae74?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

1.3注意：

在macOS High Sierra(10.13.6)及以上版本的Mac上面，使用brew install *** 安装时老是报错：Permission denied权限不足问题等等，因为苹果已经不允许Homebrew作为根来安装了。

请执行：

$ sudo chown -R `whoami` /usr/local/Homebrew/
$ sudo chown -R $(whoami) $(brew --prefix)/*
$ sudo mkdir /usr/local/Frameworks
$ sudo chown -R `whoami` /usr/local/Frameworks/

参考链接：https://blog.csdn.net/meifannao789456/article/details/105083605)

2.卸载原来的环境并安装最新 node环境:

2.1卸载node:

sudo npm uninstall npm -g
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
sudo rm -rf /usr/local/include/node /Users/$USER/.npm
sudo rm /usr/local/bin/node
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/dtrace/node.d

2.2验证：

//输入node 点击回车
node
// 提示：command not found
//输入npm 点击回车
npm
// 提示：command not found

参考链接：https://www.cnblogs.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://www.react-native.cn/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.5find_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)))")
enddef find_and_replace(dir, findstr, replacestr)Dir[dir].each do |name|text = File.read(name)replace = text.gsub(findstr,replacestr)if text != replaceputs "Fix: " + nameFile.open(name, "w") { |file| file.puts replace }STDOUT.flushendendDir[dir + '*/'].each(&method(:find_and_replace))
end

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

参考链接：https://www.jb51.net/article/211935.htm

React Native 运行环境安装：0.6以下/以上版本的新老项目都适用相关推荐

React Native windows环境安装遇到的坑
在官方中文文档中(http://reactnative.cn/docs/0.37/getting-started.html)有一段话是:使用Chocolatey来安装NodeJS.注意,目前已知Nod ...
windows 下配置 react native 开发环境
windows 下配置 react native 开发环境安装nvm 由于react native 需要使用 NodeJs 4.0以上版本,为了方便切换NodeJs,首先我们需要安装nvm. 你可以 ...
[转] 在Mac上搭建React Native开发环境
原文链接: http://blog.csdn.net/xiangzhihong8/article/details/53914336 概述前面我们介绍过在window环境下开发React Native ...
Windows环境下安装React Native开发环境----记一次填坑过程
前言集成React Native开发环境遇到各个坑,调试了很久出现过找不到设备,百度上个别人的资料有误被绕来绕去耽误了很多时间,下载慢等待时间过长等问题,最后多方查阅资料,电脑重启等操作终于部署好了 ...
在windows上搭建React Native开发环境
最近要学习React Native,但是在window上搭建开发环境的时候遇到了些问题,以至于一直没有搭建好开发环境. React Native相关项目及文档: react-native的GitHub ...
React.js 小书 Lesson5 - React.js 基本环境安装
React.js 小书 Lesson5 - React.js 基本环境安装本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson5 转载请注明 ...
linux go语言运行环境,安装Go语言运行环境
安装Go运行环境,如果从旧版本的Go进行升级,必须先删除现有版本. 1. 二进制包安装下载包 cd /usr/local/src wget https://storage.googleapis.co ...
VScode配置CMD本地运行环境(2.0)
VScode配置CMD本地运行环境(2.0) 官方Task.json说明完整的Task.json配置信息 Task.json预定义变量看了很多网上的教程都说需要下载VScode的python插件, ...
DL之IDE：深度学习环境安装之Visual Studio 2015版本+CUDA8.0+Cudnn8.0+OpenCV 3.1.0版本完美搭配安装图文教程之详细攻略
DL之IDE:深度学习环境安装之Visual Studio 2015版本+CUDA8.0+Cudnn8.0+OpenCV 3.1.0版本完美搭配安装图文教程之详细攻略导读:网上教程一大把,瞎指挥的不 ...
jupyter运行环境安装与使用
jupyter运行环境安装与使用所有文章不设限,我们相遇偶然,相散坦然,互不打扰,各自安好,向阳而生一.利用python环境,使用pip命令安装 1. 安装jupyter的方式此处省去对于pyt ...

React Native 运行环境安装：0.6以下/以上版本的新老项目都适用

React Native 运行环境安装：0.6以下/以上版本的新老项目都适用相关推荐

最新文章

热门文章

React Native 运行环境安装：0.6以下/以上版本的 新老项目 都适用

React Native 运行环境安装：0.6以下/以上版本的 新老项目 都适用相关推荐

最新文章

热门文章

React Native 运行环境安装：0.6以下/以上版本的新老项目都适用

React Native 运行环境安装：0.6以下/以上版本的新老项目都适用相关推荐