react native工程入门笔记

叫我女王大人
1,767 阅读4分钟

前言

最近接到一个需求，做一个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和图片的更新不用重新发包。

参考文件

avatar
文章
阅读
粉丝