React Native环境配置

一、安装

必需的软件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

参考:安装和配置Android SDK

可选的安装项

1.  Git

你可以使用Chocolatey来安装git:

choco install git

另外你也可以直接去下载Git for Windows。 在安装过程中注意勾选”Run Git from Windows Command Prompt”,这样才会把git命令添加到PATH环境变量中。

2.  Genymotion

比起Android Studio自带的原装模拟器,Genymotion是一个性能更好的选择,但它只对个人用户免费。

  1. 下载和安装Genymotion(genymotion需要依赖VirtualBox虚拟机,下载选项中提供了包含VirtualBox和不包含的选项,请按需选择)。
  2. 打开Genymotion。如果你还没有安装VirtualBox,则此时会提示你安装。
  3. 创建一个新模拟器并启动。
  4. 启动React Native应用后,可以按下F1来打开开发者菜单。

3.  Visual Studio Emulator for Android

(Visual Studio Emulator for Android)是利用了Hyper-V技术进行硬件加速的免费android模拟器。也是Android Studio自带的原装模拟器之外的一个很好的选择。而且你并不需要安装Visual Studio。 在用于React Native开发前,需要先在注册表中进行一些修改:

  1. 打开运行命令(按下Windows+R键)
  2. 输入regedit.exe然后回车
  3. 在注册表编辑器中找到HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools条目
  4. 右键点击Android SDK Tools,选择新建 > 字符串值
  5. 名称设为Path
  6. 双击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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注