ReactNative初探

前言

笔者一直以来都是做Android开发，近两年三端合一的趋势越来越明显，因为谷歌自己都推出了Flutter混合开发框架，所以说有必要去学习一下前端相关的一些东西了，一方面可以扩展自己知识面，另外一方面也是对未来的趋势做一个准备，由于工作的原因，我这里选择的是RN框架，当然目前主流的除了RN还有阿里的weex，谷歌的flutter，三者的优缺点可以参考这里。废话不多说了，下面我们就直接进入正题，从环境搭建开始，一起来初识RN。（官网也有详细的教程）

Windows下环境搭建

我的电脑用的是Windows系统，网上说Windows下开发RN会遇到很多莫名其妙的坑，的确如此，不过弄明白了其中原理，也不算什么坑了，昨晚我花了两个小时，算是跑通了第一个Demo，其中遇到两个坑，还好都解决了，文末会重点说明。（记得全程翻墙哦~）

Android环境搭建

由于之前一直做Android开发，所以Android的环境都是搭建好了的，这里就不多说了。

Node.js安装

首先需要下载安装Node.js，它是用来解析js的服务器，这个服务需要在本地启动起来，官网下载地址
这里我下载的是下图的版本：

注意这里版本号是11.3.0，64位的，里面包含的npm版本是6.4.1，npm是一个包管理器，不同版本可能出现的效果跟笔者有出入。下载完成之后安装即可，安装成功可以在命令行输入以下命令验证：

React Native命令行工具安装

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

安装方法：

• 一种是使用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实现安装。

此处我们使用第一种安装方法（该react-native安装到的位置默认为：【C:\Users\用户名\AppData\Roaming\npm】，如果前面node.js安装后有配置相关信息可以在配置的目录下找到），验证是否安装成功可以输入 react-native -v 查看版本号如果可以即为安装成功如下：

至此，基本的环境我们都配置好了，总共遇到了一个坑，留在后面说。下面我们就开始创建我们的第一个RN项目了。

创建项目

首先进入需要创建项目的目录，然后执行如下命令：

然后就是漫长的等待了，当然这需要看你的网络速度，我这边不到一分钟就好了，创建完成后的目录如下：

• 此过程主要是初始化Android工程，简单说就是按照Android的工程结构创建一个Android的工程，和Android原生工程不同的是，该工程里面已经引入了RN组件，此处的RN组件指的是Android工程下的组件需要区分其与上面Node.js下安装的React-native不是一个概念
• 生成的目录中的android目录即为我们熟悉的Android下的工程目录，同样的IOS的对应于ios目录
• 生成的目录中的index.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

运行项目

下面我们就可以运行我们的项目了，有几种方式，一种是直接使用命令行，还有一种是在IDE中打开并运行，IDE可以是Android Studio，也可以是xcode，也可以是nuclide等等，这里官方建议我们第一次运行项目最好使用命令行，否则会出现莫名其妙的问题，那么我们就使用命令行来运行我们的项目，首先我们要启动node.js服务，进入到项目的目录后，使用如下命令：react-native start --port 1234
至于为什么要加1234端口号，我们留到后面说，因为这里又是一个坑。。。
启动完成后如下：

这样就代表服务已经启动了，记得千万不要关闭这个窗口哦，这个就Tomcat一样，需要放在这里，后面运行项目的话我们再重新打开一个命令行窗口去操作。验证是否启动成功，我们可以访问这个地址：http://localhost:1234/index.js?platform=android
出现如下界面，说明访问成功了，这个页面的内容就是index.js文件的内容。

同时可以看到终端里面输出了我们的访问信息：

服务启动后，就可以运行项目了，记得连接我们的手机哦，这里我用的真机，输入如下命令：

安装好之后记得摇晃手机，修改我们的服务器地址和端口号为我们本机的ip和刚才服务启动的端口号，否则app（客户端）不能够与电脑的node.js服务端交互加载到js文件，导致无法加载页面：

最终效果如下：

把RN集成到现有原生项目中

这里我以Android原生项目为例，把RN集成到现有的原生项目中，整个过程非常简单，按照官方文档，我这里总共碰到了一个坑：

意思就是找不到so库，这里我们在app的build.gradle下面加上一句话就好了——在defaultConfig里面加上ndk的过滤：

ndk {
abiFilters “armeabi-v7a”, “x86”
}

然后就可以完美运行了。。。
注意整个过程中的目录存放位置，如果严格按照官方文档的话，不会出现网上说的那些坑，不管是不是Windows电脑，只有明白了目录的关系，就不会弄错。

常见问题

• 安装Node.js碰到的问题
  这个坑其实就是Windows的权限问题引起的，我们在安装的时候一定要用管理员权限打开命令行，然后输入如下命令去安装：msiexec /package node-v11.2.0-x64.msi。否则就会出现如下问题：
  
  或者是error 2502，2503之类的问题。
• Node.js服务无法启动的问题
  我们之间输入命令react-native start，然后再输入react-native run-android，会发现手机红屏，界面如下：
  
  根据提示可以看到是我们的js解析服务器，也就是node.js服务没有启动成功，原因就是我们的默认端口8081被其他进程占用了，因为node.js默认端口就是8081，这里我们可以输入：netstat -aon|findstr "8081"命令，来查看占用进程的pid，然后用pid来查找是哪个程序占用的：tasklist|findstr “这里写你获取到的pid”，我们可以查到是java.exe占用了，那么我们可以在一个新的端口号去启动服务，所以就出现了上面的react-native start --port 1234这个命令，1234你也可以换成其他任何空闲的端口号，同时记得手机端也要输入相应的IP和端口号，这样再运行就ok了。
• 其他问题
  其他问题比如在下载或者编译的过程中卡着不动，基本上是由于没有翻墙的原因引起的，大家可以找个好一点的vpn或者找一些镜像网站去下载。

好了，今天的讲解到此就结束了，有不明白的同学可以在下方留言一起讨论~

参考文章

• https://blog.csdn.net/M075097/article/details/76551303
• https://blog.csdn.net/a944540438/article/details/71627371