配置React Native环境及解决运行异常
Posted 俊华的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了配置React Native环境及解决运行异常相关的知识，希望对你有一定的参考价值。
一. 安装Homebrew:
Homebrew的官网（多语言版本）简单明了地介绍了如何安装和使用这个工具，;并提供了自己的Wiki。
brew的安装很简单，使用一条ruby命令即可，Mac系统上已经默认安装了ruby":
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
等待一段时间后会出现
Press RETURN to continue or any other key to abort
敲回车后提示输入你的电脑密码:(输入密码的过程中终端不会有任何变化)
输入密码后提示
Downloading and installing Homebrew...
继续耐心等待..
二. 安装Node.js:
使用 Homebrew 来安装nvm，watchman 和 flow.(建议每次用Homebrew的时候先更新brew,命令：brew update )
1,安装nvm:
终端中输入:
brew install nvm
最后终端会提示
大概意思就是如果没有.nvm文件的话就要创建一个,终端中输入
mkdir ~/.nvm
就可以创建.nvm文件了
,然后去~/.bash_profile或者在shell的配置文件中配置如下内容:
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh
具体操作如下
先进入home目录: cd ~
打开.bash_profileopen文件:
open .bash_profile
如果文件不存在 就创建一个
touch .bash_profile
打开后把需要配置的内容复制进去然后保存退出
现在NVM算是安装完成了.
2.使用NVM安装node.js
终端输入命令:
nvm install node && nvm alias default node
注:如果顺利安装完成可跳过下面步骤,直接进入第三步,进入安装watchman和flow环节.
nvm 默认是从http://nodejs.org/dist/下载的, 国外服务器, 必然很慢,
好在 NVM 以及支持从镜像服务器下载包, 于是我们可以方便地从七牛的 node dist 镜像下载:
$ NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/dist nvm install 0.11.11
于是你就会看到一段非常快速进度条:
######################################################################## 100.0%Nowusingnode v0.11.11
如果你不想每次都输入环境变量NVM_NODEJS_ORG_MIRROR, 那么我建议你加入到.bashrc文件中:
# nvmexportNVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/distsource~/git/nvm/nvm.sh
接着终端输入命令:
nvm install node && nvm alias default node
如果使用NVM一直安装失败.可以尝试直接使用Homebrew安装node: brew install node
三. 安装watchman和flow:
终端输入
brew install watchman
brew install flow
一切顺利
建议定期运行brew update && brew upgrade来使您的应用程序保持最新状态。
brew update && brew upgrade
四. 初始化项目及解决运行异常
初始化项目
首先安装Xcode6.3或更高版本.
完成后,终端执行
npm install -g react-native-cli
react-native-cli 是完成剩余安装的命令行工具。它是通过 npm 安装的。这将会在你的终端里面安装react-native这个命令行，你只需要做一次即可。
接着
react-native init AwesomeProject
这一条命令获取 React Native 的源代码和依赖包，然后在AwesomeProject/ios/AwesomeProject.xcodeproj创建一个新的 Xcode 项目，并且在AwesomeProject/android/app下面创建一个 gradle 项目。这个命令初始化的项目在你的用户目录下.
如果想初始化到桌面上需要 cd 到桌面 然后在执行 react-native init AwesomeProject 这个命令。
打开项目的方式
To run your app on iOS: cd /Users/BlueCity/Desktop/hello react-native run-ios - or - Open ios/hello.xcodeproj in Xcode Hit the Run button To run your app on Android: cd /Users/BlueCity/Desktop/hello Have an Android emulator running (quickest way to get started), or a device connected react-native run-android
解决运行异常
进入项目根目录后，使用 run-ios 指令启动该iOS APP：
- react-native run-ios
对于版本高于0.45的创建项目，也许你会看到如下错误：
- Error:
- Build failed:
- Unpacking /Users/zjy/.rncache/boost_1_63_0.tar.gz...
- Print: Entry, ":CFBundleIdentifier", Does Not Exist
对应的直接点开.xcodeproj 运行相关的错误信息
1、降级版本方案
本人经过多方查找，发现是创建项目下载安装node依赖模块时的资源缺失问题，目前最新的0.45及以上版本需要下载boost库，该库过大，导致下载出问题，参考:
https://github.com/facebook/react-native/issues/14368
https://github.com/facebook/react-native/issues/14447
解决方案有两种，如果不追求新版本新特性，可以降低创建项目的版本，使用 --version 指令明确设置项目版本：
- react-native init MyApp --version 0.44.3
2、替换资源文件方案
依然希望使用新版本的解决方案则是手动下载相关文件替换：
下载如下四个相关文件放到项目根目录下的 .rncache 目录下，进行替换：
下载地址： https://pan.baidu.com/s/1kV5iVzD.
下载后替换：
- cd ~/.rncache
- cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/
依次使用 cp 指令复制替换四个文件;
然后删除第三方库文件，在 node_modules/react-native/third-party/ 目录下：
- rm -r project/node_modules/react-native/third-part
再次执行启动程序：
- react-native run-ios
发现可以正常运行了，接下来我们可以在编辑器里编辑我们的项目了，如我们的react-native入口js文件– index.ios.js 文件，刷新即可看到变更。