react-native环境搭建
转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/ 一、开始: 环境需求: 1.OS X-本向导假设您的操作系统是OS X,因为这是开发IOS所必须的 2.推荐使用Homebrew(http://brew.sh/)来安装Watchman和Flow 3.安装Node.js 4.0或者更新的版本(https://nodejs.org/en/),然后直接使用brew install node安装即可,不必按照下面的步骤即可 (1)安装nvm,然后运行nvm install node && nvm alias default node,这将会默认安装最新的版本的Node.js并且设置好命令行的环境变量,这样你可以输入node命令来启动Node.js的环境 4.在命令行中输入brew install watchman,我们推荐安装watchman,否则你可能会遇到一个Node.js监视文件的系统Bug 5.如果你希望使用flow来为你的JS代码加上类型检查,那么在命令行中输入brew install flow来安装flow 我们推荐您定期运行brew update && brew upgrade来保持几个程序为最新版本 I二、Ios 开发环境的准备:你需要Xcode7.0或者更高的版本 1.进入终端 2.执行命令 npm install -g react-native-cli 3.react-native init AwesomeProject(这个生成文件需要等很久时间) 官方文档上说这样环境是可以配置成功的。但是实际上我在执行第2步的时候出现了 一大堆npm error (如下图所示) 刚开始我以为是我没有挂VPN但是看了下,我挂了VPN但是还是出错。 注释:由于众所周知的网络原因,react-native命令从npm官方源拖代码时会遇到麻烦,所以 我们需要将npm替换为国内的镜像(我用的淘宝镜像然后就成功了) npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao.org/dist 另外执行init的时候千万不养加上sudo,否则会导致一系列的权限问题。 生成的空项目如下图所示(如果是这样的文件结构说明你的环境是搭配成功的): 三、运行iOS应用
5.在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。 四、安卓环境的搭建(这里只说在Mac上的,windows的为实践) 1. mac上如果已经安装了Xcode,那么Git也就会随之安装了,否则请使用homebrew进行安装 (命令: brew install git) 2.安装Android SDK(MAC终端上的命令:brew install android-sdk) 3.定义安卓环境变量 3.1 MAC,往你的~/.bashrc,~/.bash_profile或者你终端所用的其他配置文件增加以下的内容(注释:~表示用户的目录,即/User/你的用户名/,而小数点开头的文件是在Finder中的隐藏文件,并且这两个文件有可能没被创建。请在终端下使用sudo vi ~/.bashrc命令创建或者编辑。如果不熟悉vi操作,请参考http://www.eepw.com.cn/article/48018.htm) #如果你是通过Homebrew安装的,则加入下列的路径 export ANDROID_HOME=/usr/local/opt/android-sk #否则可能是(具体视你的sdK放在哪里) export ANDROID_HOME=~/Library/Android/sdk 注意:是你的android-sdk的安装路径,但是有人会问我不知道我android sdk (大神请直接绕过)路径在哪里,那你进入终端输入android 就会弹出路径了(SDKpath:) 3.2设置SDK 3.21打开Android SDK Manager(Mac用户在终端输入android) 3.22选择以下的项目 Android SDK Build-tools version 23.0.1
3.23点击Install Packges (国内的用户推荐使用淘宝镜像) 3.3使用google官方模拟器 1.打开Android SDK Manager(参见"设置SDK"一步)
五、运行成功截图 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |