一、安装
必需的软件Windows上Chocolatey,Mac上的brew
1. Chocolatey
Chocolatey是一个Windows上的包管理器,类似于linux上的yum和 apt-get。一般的安装步骤应该是下面这样:
@powershell -NoProfile -ExecutionPolicy Bypass -Command “iex ((new-object net.webclient).DownloadString(‘https://chocolatey.org/install.ps1’))” && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
2. Python 2
打开命令提示符窗口,使用Chocolatey来安装Python 2.注意目前不支持Python 3版本。
choco install python2
3. Node
打开命令提示符窗口,使用Chocolatey来安装NodeJS。注意,目前已知Node 7.1版本在windows上无法正常工作,请避开这个版本!
choco install nodejs.install
安装完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
4. Yarn、React Native的命令行工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli
如果你遇到EACCES: permission denied权限错误,可以尝试运行下面的命令(linux系统):
sudo npm install -g yarn react-native-cli.
5. Android Studio||visual studio||webstorm
可选的安装项
1. Git
你可以使用Chocolatey来安装git:
choco install git
另外你也可以直接去下载Git for Windows。 在安装过程中注意勾选”Run Git from Windows Command Prompt”,这样才会把git命令添加到PATH环境变量中。
2. Genymotion
比起Android Studio自带的原装模拟器,Genymotion是一个性能更好的选择,但它只对个人用户免费。
- 下载和安装Genymotion(genymotion需要依赖VirtualBox虚拟机,下载选项中提供了包含VirtualBox和不包含的选项,请按需选择)。
- 打开Genymotion。如果你还没有安装VirtualBox,则此时会提示你安装。
- 创建一个新模拟器并启动。
- 启动React Native应用后,可以按下F1来打开开发者菜单。
3. Visual Studio Emulator for Android
(Visual Studio Emulator for Android)是利用了Hyper-V技术进行硬件加速的免费android模拟器。也是Android Studio自带的原装模拟器之外的一个很好的选择。而且你并不需要安装Visual Studio。 在用于React Native开发前,需要先在注册表中进行一些修改:
- 打开运行命令(按下Windows+R键)
- 输入regedit.exe然后回车
- 在注册表编辑器中找到HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools条目
- 右键点击Android SDK Tools,选择新建 > 字符串值
- 名称设为Path
- 双击Path,将其值设为你的Android SDK的路径。(例如C:\Program Files\Android\sdk)
二、 测试安装
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
Windows用户请注意,请不要在命令行默认的System32目录中init项目!会有各种权限限制导致不能运行!
手动运行Packager
有个常见的问题是在你运行react-native run-android命令后,Packager可能不会自动运行。此时你可以手动启动它:
cd AwesomeProject
react-native start
三、修改项目
现在你已经成功运行了项目,我们可以开始尝试动手改一改了:
- 使用你喜欢的文本编辑器打开index.android.js并随便改上几行
- 按两下R键,或是用Menu键(通常是F2,在Genymotion模拟器中是⌘+M)打开开发者菜单,然后选择 Reload JS 就可以看到你的最新修改。
- 在终端下运行下面语句,可以看到你的应用的日志
adb logcat *:S ReactNative:V ReactNativeJS:V