其实和 RN 官网上介绍的差不多,但是就是官网上有些坑没有说清楚,,本人在这里说清楚一下.
★ 安装
一. 必需的软件
Homebrew
Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
译注：在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到 /usr/local
目录不可写的权限问题。可以使用下面的命令修复：
sudo chown -R whoami /usr/local
Node
使用Homebrew来安装Node.js.
React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本，一般都满足要求。
brew install node
安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！ cnpm安装的模块路径比较奇怪，packager不能正常识别！
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
注意: 使用稳定版,不要使用最新版!
Yarn、React Native的命令行工具（react-native-cli）
Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
npm install -g yarn react-native-cli (安装不成功,就分开)
安装完yarn后同理也要设置镜像源：
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
如果你看到EACCES: permission denied
这样的权限报错，那么请参照上文的homebrew译注，修复/usr/local
目录的所有权：
sudo chown -R whoami /usr/local
安装完yarn之后就可以用yarn代替npm了，例如用yarn
代替npm install
命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。
注意：目前npm5（发文时最新版本为5.0.4）存在安装新库时会删除其他库的问题，导致项目无法正常运行。请尽量使用yarn代替npm操作。
降低 npm 版本: npm i npm@3.10.10 -g
降低到3.10.10版本,,用着目前没有任何问题!
★ 运行到 Android Studio 上
一. 安装 JDK JDK官网
Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中输入 javac -version
来查看你当前安装的JDK版本。如果版本不合要求，则可以到 官网上下载。
需要Oracle Account ,我的账户是: 250230557@qq.com ,密码: Ma1...
下载 JDK
二.安装 Android Studio 官网
React Native目前需要 Android Studio2.0 或更高版本。
Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。
除非特别注明，请不要改动安装过程中的选项。比如
Android Studio默认安装了Android Support Repository，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）。
安装过程中有一些需要改动的选项：
- 双击 Android Studio -->>
点击取消
- 选择 Custom 选项：
Custom
- 勾选
Performance和Android Virtual Device
勾选
4.安装完成后，在
Android Studio 的启动欢迎界面中选择 Configure | SDK Manager。
Configure | SDK Manager
- 在
SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
SDK Platforms
6.在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository. (图见上面的)
ANDROID_HOME环境变量
- 确保
ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径
请在终端下使用vi ~/.bash_profile命令创建或编辑: 复制粘贴下面代码:
# 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。
export ANDROID_HOME=~/Library/Android/sdk
英文状态: i 编辑 ;
英文状态: esc 退出 vi 状态
英文状态: : 进入命令状态
英文状态: wq 退出并保存
- 然后使用下列命令使其立即生效（否则重启后才生效）：
source ~/.bash_profile
3.使用 echo $ANDROID_HOME检查此变量是否已正确设置。
如果查不到,就关闭终端,再重新打开一次!
正确的输入如下:
正确输出
三. 测试安装
react-native init AwesomeProject # 初始化项目
cd AwesomeProject # 切换到项目里
react-native run-android # 运行到 Android 上
提示：你可以使用--version参数创建指定版本的项目。例如react-native init MyApp --version 0.39.2。注意版本号必须精确到两个小数点。
这个提示一定要注意: 我之前的 Xcode 就是没有输入到这个版本号就一直没有运行成功,虽然运行到安卓上没有问题,反正最好注意一下吧!
四. 运行:
- 选择 android 文件夹 路径:
/Users/MMMM/Desktop/RN/demo01/android
选择已经存在的android项目
选择之后,会加载一段时间
2 . 运行 Android Studio
运行
-
加载一会就 OK 了
成功运行
五. 修改项目:
- 第一次运行一定要在 Android Studio 上运行,,,因为第一次运行了才能启动模拟器; 可以通过
adb devices--> 出现 序列号 + device 就证明有; - 以后更该项目: 就在
index.android.js上改; - 然后在终端上运行:
react-native run-android
★ 运行到 Xcode 上
一.安装 Xcode
在 app store 上安装或者 官网上下载安装: 很大,,,4G
二. 测试安装
1.注意事项:
注意：init命令默认会创建最新的版本，而目前最新的0.45及以上版本需要下载boost库编译。此库体积庞大，在国内即便翻墙也很难下载成功，导致很多人无法正常运行iOS项目，中文网在论坛中提供了这些库的国内下载链接。如果你嫌麻烦，又没有对新版本的需求，那么可以暂时创建0.44.3
的版本。
提示：你可以使用--version参数（注意是两个杠）创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。
[重要]<这个坑,我真的遇到了,,不加--version 设置版本,,真的运行不起来,,加上版本号,就可以了>
- 代码:
react-native init AwesomeProject --version 0.44.3
cd AwesomeProject
react-native run-ios
- 其他就不再多写了,,,其实 和 Android Studio 几乎是一模一样了!
修改找:index.ios.js,,运行的话,第一次运行在 Xcode 上
以后运行在 Xcode 上或者是react-native run-ios都是一样的了!
双胞胎
网友评论