react native工程入门笔记

前言

最近接到一个需求，作一个android端的应用，在同事的建议和指导下选择了React Native（下文简称RN），趁着本身搭工程的机会，总结一下一个RN工程从无到有的完整过程（此处只讲android工程）。

RN简介

RN是一个基于react的js库，用于开发ios、android系统中的的native应用。结合了native和h5的优势，具备性能好、灵活度高、接入成本低等特色。

项目建立

安装命令行工具

首先安装react-native-cli，安装成功之后就能够使用react-native的命令行进行建立、初始化、更新项目、运行打包服务等工做。

npm install -g react-native-cli
复制代码

此处推荐安装yarn代替npm，yarn是由Facebook提供的命令行工具，能够加速模块的下载速度。yarn安装完之后就能够使用yarn代替npm了。

npm install -g yarn
复制代码

建立新项目

运行react-native init 命令，建立一个新项目

react-native init RNTestProject
复制代码

环境准备

经过react-native init生成了项目之后须要进行开发环境的配置

• 安装JDK得到java开发环境（因为android底层是由java编写，所以JDK必不可少）
• 安装Android Studio，自动获取编译Android所需的依赖

安装Android Studio

按照提示安装完后打开android studio进入欢迎界面之后，须要配置编译RN应用所需的Android SDK。

配置Android SDK

1. android studio欢迎界面右下角点击"Configure"，选择SDK Manager
2. 在”SDK Platforms“ tab下选择Android 9.0(pie)，编译 React Native 应用须要的是Android 9 (Pie)版本的 SDK
3. 勾选左下角的“Show Package Details”，勾选“Android SDK Platform 28”和“Intel x86 Atom_64 System Image”选项

   

4. 在“SDK Tools”的选项卡下，勾选左下角的“Show Package Details”，勾选"Android SDK Build-Tools"下的28.0.3版本。

配置环境变量

配置ANDROID_HOME环境变量，React Native 经过ANDROID_HOME环境变量来肯定 Android SDK 的安装路径，从而正常进行编译。

将路径:/Users/summer/Library/Android/sdk/platform-tools加在~/.bashrc中的export PATH=XXX的后面。确保~/.bash_profile中有以下配置

if test -f .bashrc ; then
source .bashrc
fi
复制代码

这样才会在用户登陆时先执行~/.bash_profile再执行~/.bashrc，修改在重启shell后生效。

Android 设备

在运行RN应用以前须要准备一台Android设备，设备能够是真机也能够是模拟器，此处我使用的是模拟器。

1. 在android studio右上角有一个安卓logo的图标，点击图标
2. 点击create vitrual device，选择合适的机型
3. 选择系统镜像（RN 目前支持 android4.1 以上设备，镜像的android版本须要在4.1以上），下载镜像
4. 一路next 和finish就能够了，成功之后就是这个样子

虚拟设备安装成功之后，可经过adb devices -l命令查看当前可用的设备

项目运行

设备安装完成之后就能够运行RN项目了，在工程目录中运行react-native run-android命令

运行命令后会自动调起命令行运行一个打包服务，端口为8081，用于提供js文件（开发模式中RN应用的前端文件是由8081端口加载；打包成apk包之后前端文件会被打进apk包）

run-android会自动构建apk包并安装到可用的设备上，首次运行设备可能会出现红屏错误，是由于没有配置正确的打包服务。解决方式以下：

1. command + m 选择 dev setting
2. 选择debug server host & port for device
3. 填入[本机ip]:[8081]，点击ok就能够了

debug姿式

调试js代码的姿式：

• command + m 打开开发者菜单，选择"Debug JS Remotely"
• 点击这个选项的同时会自动打开调试页面 http://localhost:8081/debugger-ui
• 打开开发者模式，能够开始在 Chrome 中调试 JavaScript 代码
• Chrome 中并不能直接看到 App 的用户界面，而只能提供 console 的输出，以及在 sources 项中断点调试 js 脚本

调试请求的姿式：

• 使用charles抓包工具
• 在android模拟器中打开setting，切换到proxy，选择manual proxy configuration，而后填写本机的ip和charles的端口
• 这样全部从andriod模拟器发出去的请求都会被charles抓到，可查看请求的详细信息

其余工具

code push

code push是一个云服务，能够将更新（JS，HTML，CSS和图片）发布到这个仓库上，而后用户端app能够查看并下载更新。所以JS，HTML，CSS和图片的更新不用从新发包。

• code push命令行
• CodePush热更新详细接入教程

参考文件

• React Native 中文网