Hybrid开发环境搭建

开发方式

Expo

简介

这是一个制作原生APP的开源平台,是一组工具，库和服务，可以通过编写JavaScript来构建、部署和快速迭代原生iOS和Android应用程序。

Expo正在成为一个独立的生态系统，由五个相互关联的工具组成：

• Expo CLI：Expo的命令行界面。使用Expo CLI创建，构建和提供应用程序。
• Expo开发人员工具：一个基于浏览器的工具，通过expo start命令从终端启动Expo应用程序，就会自动运行 。为开发中的应用程序提供活动日志，并快速访问本地运行应用程序并与其他开发人员共享应用程序。
• Expo Client：适用于Android和 iOS的应用程序 。此应用程序允许在设备上的Expo应用程序中运行React Native项目，而无需安装它。这允许开发人员在真实设备上热重载，或与其他任何人共享开发代码，而无需安装它。
• Expo Snack：这个网络应用程序允许在浏览器中处理React Native应用程序，并预览正在处理的代码。
• Expo SDK：这是一个包含大量JavaScript API 的SDK， 它提供了基本React Native软件包中没有的Native功能，包括使用设备的照相机、通知、传感器、加速计、地理位置等等。这个SDK随着使用Expo创建的每个新项目一起出现。

安装

npm install expo-cli --global
expo init xxx
cd xxx
expo start

原生环境

平台要求

• Windows ---> android
• macOS ---> android or ios

安装依赖（Android环境）

• 安装 Node（版本大于10）, Python2.x

• 安装 JDK

  1. 官网：http://www.oracle.com/technetwork/Java/javase/downloads/index.html

  

  1. 选择版本（Java SE 8 版本）。

  

  1. 双击-安装。

  2. 配置环境变量：计算机——属性——高级系统设置——环境变量。

  3. 新建一个系统环境变量，变量名为 JAVA_HOME，变量值为 JDK 的安装路径（bin文件夹所在目录）。

  4. 在系统变量中找到Path，将 %JAVA_HOME%\bin 添加进去

  5. 检查是否配置成功。打开命令行窗口，输入 javac –version，是否出现版本号（如果不成功，可以将第 5、6 步省去，换成直接将 JDK 的安装目录添加进 Path，例如将 C:\Program Files\Java\jdk1.8.0_161\bin 添加进 Path）。

• 安装 SDK

  1. 官网：http://www.androiddevtools.cn，往下滚动，找到SDK Tools下载下图中所示压缩包，无需安装，只需解压到一个目标路径，不能是中文。

     

  2. 然后双击“SDK Manager”，启动SDK Manager。

  3. 勾选红框标出的复选框，点击右下角 **install packages **按钮下载。

     注意：

     1. Android SDK Build-tools必选28.0.3版，这是RN要求的版本，同时可多选几个其余版本一同下载；

     2. SDK Platform ：28版本以下不用安装，29可一同安装上，

        Intel x86 Atom_64 System Image 是官方模拟器镜像文件，使用非官方模拟器不需要安装此组件，本教程可不用

     3. Extras 全部安装

     

     

     

  4. 创建环境变量：新建一个系统环境变量，变量名为ANDROID_SDK_ROOT，变量值为SDK的存放路径（即 SDK Manager.exe所在目录）。

     

  5. 将 tools 和 platform-tools 添加进 Path 环境变量里，可如下图直接添加，也可利用 步骤 4 中的 ANDROID_SDK_ROOT 变量。

     

  6. 检查是否配置成功，在命令行输入 adb，输出版本信息则为成功。

• 配置 gradle。RN 最后打包需要 gradle 。无需安装，只需解压到一个目标路径下，然后配置环境变量，直接将路径添加到 Path 系统环境变量后面，如： D:\Program Files\gradle-4.5\bin

安装模拟器

• 安装 Android 模拟器（夜神模拟器）
• adb版本号不一致的，将 SDK 中 platform-tools 里的 adb.exe 复制出去一份，重命名为 nox_adb.exe ,替换掉 模拟器 bin目录下的 nox_adb.exe
• 执行 adb connect 127.0.0.1:62001（不要在模拟器的bin目录下执行）
• 测试，执行 adb devices，如果显示连接的设备，就成功

创建-运行项目

• 使用 React Native 内建的命令行工具来创建一个新项目。这个命令行工具不需要安装，可以直接用node自带的npx命令来使用

npx react-native init ProjectName --version 0.64.0

• 进入项目，运行项目（确保已打开模拟器或连接手机真机）

yarn react-native run-android