Windows下RN环境搭建及官方Demo运行

Windows下RN环境搭建及官方Demo运行

一.Android 工程环境构建

• 1-1：AS安装（IDE）
• 1-2：JDK安装

二.React-Native环境构建

2-1：Note.js安装（必选）（包含js解析引擎，用来解析js代码）

Note.js 安装步骤参考：http://www.jianshu.com/p/03a76b2e7e00

2-2（可选）：curl工具安装：curl是利用URL语法在命令行方式下工作的开源文件传输工具。它支持很多协议：FTP, FTPS, HTTP, HTTPS, GOPHER, TELNET, DICT, FILE 以及 LDAP。 我们主要是用来拉取nodejs生成的所需的离线bundle；另一种方式是，使用原生react-native命令生成离线bundle

• 1.windows系统：到该地址下载相关的zip包https://curl.haxx.se/download/
• 2.解压到下载的zip包到指定的目录下，此处以E:\Program Files\curl-7.54.1为例
• 3.此时在该目录下打开命令行窗口，执行curl -V(大写)查看版本信息，如果有版本信息则说明已经可以使用，ps：也可以直接请求一个网址看看其返回的网页信息 curl www.baidu.com
• 4.如果想在其他目录下也能执行curl命令，配置系统环境变量：在系统环境变量path中添加
  该curl的目录路径，此处即为上面的解压目录E:\Program Files\curl-7.54.1

2.3：react-native命令行工具安装(必选)

需要说明一点的是，该处安装的react-native相当于node.js的一个插件，有了该react-native插件，才能1.初始化出一个带有支持RN组件的android Demo工程，2.该插件的作用还有当node.js服务启动后，当native端的APP发起JS的bundle请求时，检查服务端的js信息是否有更新，并打出native端所需的bundle传给native端

2.3.1安装方法：

• 一种是使用node.js自带的npm包管理工具执行:npm install -g react-native-cli 实现安装 ps:-cli前无空格
• 另外一种是使用git clone react-native的安装包到本地目录，命令为:git clone https://github.com/facebook/react-native.git，然后进入刚刚目录下的react-native目录下的react-native-cli目录，输入npm install -g实现安装。

2.3.2 此处我们使用第一种安装方法，过程如下（该react-native安装到的位置默认为：【C:\Users\用户名\AppData\Roaming\npm】，如果前面node.js安装后有配置相关信息可以在配置的目录下找到）

ps:出现以下错误信息，则上面的命令-cli前面加了空格，去掉空格重新执行命令即可：

Looks like you installed react-native globally, maybe you meant react-native-cli?
To fix the issue, run:
npm uninstall -g react-native
npm install -g react-native-cli

2.3.3 验证是否安装成功可以输入 react-native -v 查看版本号如果可以即为安装成功如下：

2.4:git 安装（可选）

三.使用react-native命令初始化RN工程

3.1 进入要创建工程的目录（随意）命令行下执行 命令：react-native init MyFirstRNDemo （需要科学上网，等待完成时间较长）

初始化完成后的目录结构如下：

• 此过程主要是初始化Android工程，简单说就是按照Android的工程结构创建一个Android的工程，和Android原生工程不同的是，该工程里面已经引入了RN组件，此处的RN组件指的是Android工程下的组件需要区分其与上面Node.js下安装的React-native不是一个概念
• 生成的目录中的android目录即为我们熟悉的Android下的工程目录，同样的IOS的对应于io目录
• 生成的目录中的index.android.js即为node.js需要解析的js文件，其对应js端的逻辑和布局，因为Demo工程较为简单，只对应有这一个js文件，里面内容是app中要显示的内容
• 生成目录中的package.json，该文件是node.js工程初始化之后的一个配置文件，由此可以看到，该目录目前是node.js工程和android工程的混合
• 生成目录中的node-modules该目录下是React开发对应此处React-native开发所需要的js端官方封装好的基础组件，我们能够直接使用一些Android中对应的js端组件就在于此处提供，相当于Anddoid工程下的系统API

3.2执行命令：react-native start（也可不执行，不执行时在执行下一个安装命令的时候，底层会在检测到node.js服务未启动的时候自动启动起来）

• 该命令会启动node.js服务，该服务的根目录在上一步init的时候设置的也为文件的根目录，此时启动后，根目录即为服务端的根目录，该根目录下的index.android.js文件即可以被node.js解析到并按规则，转化为bundle文件供Native端解析使用。
  

  ps:当使用离线包时，则只需把生成的bundle文件拿出放到natice端指定的目录下，能够被native端的react native模块识别加载到即可。离线情况下，native端集成所需的bundle，如果没有更新JS段的代码，则不需要新的bundle，即也不需要再与该服务端交互。

3.3 验证js服务端是否启动们可以在浏览器中输入http://localhost:8081/index.android.bundle?platform=android 查看是否能够连接

3.4 连接android手机到电脑进入工程的根目录，执行命令：react-native run-android，编译上一步init出来的android工程代码并安装到手机

编译安装init出来的Android工程命令：react-native run-android

PS：1.此过程如果出现JDK路径错误，请修改JAVA_HOME值到bin目录上一级，path里面改为%JAVA_HOME%/bin,ps：win10遇到过改过之后，需要重启后才起效的情况

2.如果出现ANDROID_HOME无效找不到，需要配置Android的SDK位置，方法是在环境变量中添加键为ANDROID_HOME，值为Android SDK 位置的目录，默认地址一般为C:\Users\XXXX(用户名)\AppData\Local\Android\sdk，或者直接在生成工程的android目录下，新建local.property文件添加SDK的路径进去格式为

local.property//文件名
sdk.dir=E:\Users\Administrator\AppData\Local\Android\sdk //需要添加的键值对

3.5 安装成功则demo app 会直接启动，由于此时使用usb连接，demo app（客户端）能够与电脑的node.js服务端交互加载到js文件，因此正常能够看到RN的页面如下：

3.6 此时RN的APP已经安装完毕，但有以下需要注意：

3.6.1 此时app和node.js服务端的交互是通过数据线传递的数据，如果拔掉数据线，摇晃手机打开RN开发者菜单，点击reload，可能会出现红屏，提示：could not connect to development server.

3.6.2 解决方法为：首先保证手机和电脑处于同一wifi下，然后摇出RN开发者工具菜单依次打开Dev Setting–>Debugging–>然后输入电脑在该网段分配的IP地址，并设置端口号为8081（node.js服务的默认端口号）格式如下：192.168.3.3：8081，然后重新reload此时即可重新请求到数据

四.至此，React-native官方的demo工程已经安装完毕

当前的页面即是通过解析js端的布局及逻辑，并依靠RN Native端的模块重构出来的android原生页面。你可以打开根目录下的index.android.js 做一些简单的布局或者文案的修改然后重新reload，即可看到效果，而这也正是RN的亮点

五.总结：

• 首先明确一点：执行init命令出来的目录是一个node.js工程，同时其下面的android文件夹也是一个android工程
• 1.RN native端的工程的构建首先是在android原生的工程之上的，因此JDK和androidi开发的SDK不能少
• 2.为什么要用node.js:由于RN工程UI和逻辑是使用JS来完成的实现的，并且native端要能够请求到这些文件。要解析这些，并能实现作为一个服务端，供客户端请求官方推荐的是Node.js，这是为什么使用node.js的原因

• 3.为什么要在node.js上安装react-native的插件：同时js端的实现是和native端对应的，而js端的实现想要能够被native端识别并展现出来是需要符合相关规则的，而这些规则的解析及生成相关native端需要的bundle，node.js是不足够的，因此我们需要facebook为此实现的react-native 插件，node.js通过该插件即可解析并进一步生成bundle文件，以供使用

• 4.react的组件开发要按照相关规则，我们知道在native段android有大量的系统组件已经实现，因此相应在js端facebook官方也已经按规则实现了相当一部分的控件及实现，这些组件在我们执行 react-native -init的时候即会直接帮我们拉取到根目录下即目录node_modules,而不是有我们自己重新一个一个的对应解析关系并封装使用而是直接引用即可，facebook同时也将这种规则暴漏了出来，这也使开发者同样有能力自己定义自定义的组件并使用，但需要知道一点是js端可以用的基础组件是由native端按照规则暴漏出来的。

  ps:关于是怎么拉取到node_modules的可以打开根目录下的package.json,该文件为node.js工程初始化后的配置文件，有点类似于android的gradle文件里面配置了当前node.js工程，package.json配置如下

  {
      "name": "MyFirstRNDemo",//node.js工程的名称
      "version": "0.0.1",//版本
      "private": true,
      "scripts": {
          "start": "node node_modules/react-native/local-cli/cli.js start",//这个是我们使用ract-native -start 能够启动node.js服务的原因，其根本上还是调用了node的命令
          "test": "jest"
      },
      "dependencies": {//这个是该工程依赖的组件 分别为react和react-native，和android一样编译的时候会拉取相关对应的组件，对应会放到node_modulese文件夹下，这样对于node.js工程来说，入口文件index.android.js中也就能够直接引用相关组件了，如果js端代码可以参考facebook的写法，还是不错的
          "react": "16.0.0-alpha.12",//node.js工程依赖的react
          "react-native": "0.46.4"//node.js工程依赖的react-native版本
      },
      "devDependencies": {
          "babel-jest": "20.0.3",
          "babel-preset-react-native": "2.1.0",
          "jest": "20.0.4",
          "react-test-renderer": "16.0.0-alpha.12"
      },
      "jest": {
          "preset": "react-native"
      }
  }
  

• 5.关于命令 react-native init <工程名> 该步会从相关的远程copy配置好的工程目录层次到本地，并同时初始化当前目录为node.js工程,如果直接用node命令初始化当前目录为node.js工程，该命令为：node init，会拉取所有的当前根目录package.json中配置的所有依赖

• 6.关于命令 react-native start 该命令是用来启动node.js服务 对应的nide命令为node -start
• 7.关于命令 react-native run-android 该命令则执行编译android工程并生成APK包，进一步安装到手机上，这个和我们使用AndroidStudio构建工程是一样的
• 8.APP启动native模块会到当前服务端拉取相关的bundle信息，此时服务端的地址，即为在react-native start时启动的node.js地址，在局域网中可以使用IP：端口号指定，node.js服务默认开的端口是8081，这也是为什么我们需要在调试时手机和电脑在同一个网段下，并需要设置IP和端口的原因
• 9.APP在拿到服务端生成的bundle信息之后，会重构为native端的控件/组件显示出来
• 10.以上尽量列举了按照官方步骤跑起来一个RN demo的过程，同时也大致列举出了构建出来工程各模块的关系以及各工具所扮演的角色。这样当我们改造原生Android工程时会比较好理清那些事我们必须要做的，以及那样做的意义，但以上没有涉及native端相对于原生的android工程有哪些差别，这在我们自己动手改造一个原生android工程之后，自然就会清楚

以上为RN工程环境搭建及运行，后面会改造一个现有的Android工程以了解RN工程native端和原生的有何差别，以及JS端的是怎么运作的