使用JavaScript构建原生移动端应用

React Native 与 Expo

React Native由Facebook开源，是目前流行的跨平台移动应用开发框架之一，与React一样为组件式，熟悉前端的开发人员可以快速上手。

Expo包含一组工具、库和服务，在React Native的基础上做了很多的设置与简化，可以快速上手项目同时为开发提供了多种便利的服务，也可以让我们使用自己喜欢的编辑器来写代码。

初始化项目

开发环境

1 2	# node 12以上 # yarn/npm/cnpm

安装expo cli

1
2
3

# 网慢用淘宝的 cnpm i expo-cli -g
npm i expo-cli -g
expo --version

创建项目

1
2
3

expo init 项目名
# 可以先选blank 熟悉一下项目初始化的流程
# 如果安装js依赖失败但提示项目already 可以手动进入到项目运行yarn 或者 npm i

运行项目

1
2
3

# 先进入到项目中
yarn start
# 或 npm start

点击左下方的Run in web browser即可在浏览器端打开项目。

连接Android

使用自己的手机

先到官网下载安卓版的Expo Client安装包，在自己手机上装好。让手机和电脑在同一个局域网内，打开手机端的客户端，扫描浏览器左下方或者控制台出现的二维码即可（启动后需要等一会儿左下角才会出现二维码）。

使用模拟器

下载Android Studio，官网。

安装，选标准安装，一直下一步即可，如果提示Setup Proxy，点击cancel，最后等待下载安装完成。

SDK Manager里可以查看和安装Android SDK，如果是标准安装的话，不用动。

创建模拟器

选择AVD Manager进入模拟器管理页面，点击Create Virtual Device然后选择一个带有谷歌套件的系统（我用的Pixel 3a, Q），然后启动模拟器即可，等待模拟器开机完成。

连接到模拟器

模拟器启动完成后，在运行中的Expo控制台按a键，或者浏览器端左下角点击Run on Android即可连接到模拟器，它会自动先安装一个Expo Cilent给模拟器，如果提示安装失败，就手动从官网下一个apk安装包，手动安装到模拟器（直接把安装包拖到模拟器即可），再重新连接到模拟器即可。

ctrl + m 可以打开开发者菜单

远程调试

可以在Chrome或Vscode中对程序debug

chrome：启用开发者菜单中的Debug Remote JS，会自动打开chrome，可在chrome中debug。

vscode：先下载React native tools扩展，等待安装完成。同样启用开发者菜单中的Debug Remote JS，关闭chrome，然后在vscode中进入调试页面，点击左侧的创建文件，然后在下拉菜单中选择React Native，调试配置项只选择Attach to packager。在打开的launch.json文件中，添加一个configuration，输入react native在提示中选择Debug Android。该文件会保存在项目根目录的.vscode文件夹内，最终的文件内容：

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Android",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "launch",
      "platform": "android"
    },
    {
      "name": "Attach to packager",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "attach"
    }
  ]
}

打开vscode的设置，搜索react-native.packager.port，将值改为19001，和上面chrome调试页同样的端口号。最后启动调试即可。