React Native 初探---环境配置和运行第一个App

2019独角兽企业重金招聘Python工程师标准>>>

环境配置:(针对android)

1. 安装node.js  配置国内镜像  安装react native的命令行
2. 安装java8或以上
3. 安装Android studio 并且sdk 中的Android版本必须有23.0.1
4. 初始化我们的第一个reactNative项目

第一步:

    从node.js官网下载对应的安装包http://nodejs.cn/download/

下载好一路安装就行。验证是否安装成功win+R 输入cmd 打开终端，按如图所示输入验证

接下来就是安装React Native 的命令行工具 ：

安装完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

具体截图如下：

 

到这里，我们第一步就完成了，第二步是为了安装APP而准备的运行环境 java和sdk

第二步：

下载java8或以上（必须是8 或以上）一路默认安装就行。安装android studio 之后看这个图

在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository.（最好是关于23.0.1的都下载下来）

ANDROID_HOME环境变量：

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建

具体的路径可能和下图不一致，请自行确认。

你需要关闭现有的命令符提示窗口然后重新打开，这样新的环境变量才能生效。

android Sdk环境和tool：

你可以把Android SDK的tools和platform-tools目录添加到PATH变量中，以便在终端中运行一些Android工具，例如android avd或是adb logcat等。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 选中PATH -> 双击进行编辑

注意你的具体路径可能和下图不同

第三步：

创建我们第一个的reactNative应用：（test就是你要创建的工程名）

接下来，你就是需要等待了，可能要几分钟，知道出现如图：

此图代表创建项目成功，接下来就是要在项目的目录下运行工程

运行app需要手机或模拟器，先看看有没有连接上，输入（adb devices）

此时已经有机子可以测试了，用命令去运行工程  react-native run-android，在运行时会启动包管理服务器，需要重启只需要在终端输入：react-native start 。（可能会出现安装不成功，如果是以下如图原因，最好换个手机或模拟器。）

这里还要提醒一下：在手机系统5.0以上需要输入：adb reverse tcp:8081 tcp:8081。这样App才能访问到包服务器资源。5.0以下需要在应用下设置路由并同一个wifi（很麻烦）建议采用5.0以上

 

 

， 

转载于:https://my.oschina.net/huangzhi1bo/blog/871226