http://reactnative.cn/docs/0.28/getting-started.html#content
ReactNative 视频教程:https://ke.qq.com/course/197101
1.安装jdk1.8
参考:https://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html
2.安装android studio
打开Android SDK Manager。
选中以下项目,以下的是必需安装:
-
Android SDK Build-tools version 23.0.1
-
Android Support Repository
-
Android 6.0 (API 23)
3.配置sdk路径
-
添加环境变量ANDROID_HOME :android sdk根路径
-
修改path路径:%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
以上1-3步骤是搭建android开发环境, 因为ReactNative的开发环境是依赖Android开发环境
4.安装Python2
将python加入环境变量,然后可以通过 python
的命令来测试python是否安装成功
参考:https://jingyan.baidu.com/article/c910274be14d64cd361d2dd8.html
5.安装node
ReactNative是基于js的,Node.js轻量级的Web服务器,想要是React Native跑起来需要安装node, 如果没有安装node.js,先去官网安装node.js,最好是4.1以上版本 可以通过node -v的命令来测试NodeJS是否安装成功 //安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。 npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global
6.安装git(可选)
安装React-native可能需要用到Git,如果没有配置git,需要先下载对应的客户端, 然后将git加入path环境变量
7.安装yarn 和 react-native命令行工具react-native-cli
第一种(推荐):
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
第二种:
git配置完成后可以clone React-native-cli了,建议大家到将react-native-cli克隆到某个盘,不要在c盘直接clone 1)在命令行中进入你希望RN安装的目录 2)输入git clone https://github.com/facebook/react-native.git,等待下载 3)clone成功后,找到react-native-cli目录,输入npm install -g 4)安装好之后,可以命令行下就有react-native命令了
参考:http://blog.csdn.net/u012987546/article/details/52210530
ReactNative 中文官网:http://reactnative.cn/docs/0.45/getting-started.html
mac下的安装的视频教程:https://ke.qq.com/course/197101
1.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
2.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
3.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
4.Xcode
React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。
虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在
Xcode | Preferences | Locations
菜单中检查一下是否装有某个版本的Command Line Tools
。Xcode的命令行工具中也包含一些必须的工具,比如git
等。
5.Android Studio
React Native目前需要Android Studio2.0或更高版本。
Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中输入
javac -version
来查看你当前安装的JDK版本。如果版本不合要求,则可以到 官网上下载。
JDK安装教程:http://blog.csdn.net/qw963895582/article/details/49299433
Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。
除非特别注明,请不要改动安装过程中的选项。比如Android Studio默认安装了
Android Support Repository
,而这也是React Native必须的(否则在react-native run-android时会报appcompat-v7包找不到的错误)。
安装过程中有一些需要改动的选项:
-
选择
Custom
选项:
-
勾选
Performance
和Android Virtual Device
-
安装完成后,在Android Studio的启动欢迎界面中选择
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 Tools
窗口中,选择Show Package Details
,然后在Android SDK Build Tools
中勾选Android SDK Build-Tools 23.0.1
(必须是这个版本)。然后还要勾选最底部的Android Support Repository
.
ANDROID_HOME环境变量
确保ANDROID_HOME
环境变量正确地指向了你安装的Android SDK的路径。具体的做法是把下面的命令加入到~/.bash_profile
文件中:(译注:~表示用户目录,即/Users/你的用户名/
,而小数点开头的文件在Finder中是隐藏的,并且这个文件有可能并不存在。请在终端下使用vi ~/.bash_profile
命令创建或编辑。如不熟悉vi操作,请点击这里学习)
# 如果你不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。 export ANDROID_HOME=~/Library/Android/sdk
然后使用下列命令使其立即生效(否则重启后才生效):
source ~/.bash_profile
可以使用echo $ANDROID_HOME
检查此变量是否已正确设置。
6.Watchman (推荐安装的工具)
Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。
#把下面这个命令考到终端下执行 brew install watchman
7.测试安装(建议先启动模拟器)
# run android 把下面这个命令考到终端下执行 react-native init AwesomeProject cd AwesomeProject react-native run-android # run ios 把下面这个命令考到终端下执 react-native init AwesomeProject cd AwesomeProject react-native run-ios