React Native开发情况搭建

一、React Native概述   

         React是一个构建用户界面的JS框架，实现了数据的相应式和组件化开发，本身既可以用于Web网站项目，也可以用于创建移动端App项目。
         相较于Vue.js在移动端只能构建WebApp，React生态体系中有一个可以构建“真正原生App”的扩展 —— React Native，可以如许说：“RN是React生态圈可以傲视别的对手的绝对功臣”。

原理：RN应用中的JS代码，在开发运行阶段会被编译为原生的Java或OC代码

Vue.js项目 => 运行在Web服务器 => 客户端用欣赏器访问（必须有服务器地点/端标语）

React+RN项目 => 编译打包封装为App(Java/OC)  =>  原生App代码直接运行在手机中

 RN英文官网：https://reactnative.dev/
 RN中文网：https://www.reactnative.cn/
 最新版本： 0.69

RN开发情况搭建总结：                         1、安装必须的支持软件： Node.js 和 JDK                         2、安装原生Android开发工具：Android Studio                         3、使用Android Studio下载Android SDK —— 类似于Node.js项目的node_modules                         4、修改Windows体系变量Path，设置SDK实行工具地点的目次                         -----------------------------------------------------------------------------------------------                         5、运行RN项目脚手架工具，创建出空缺项目                         6、编译空缺项目，得到AndroidApp的安装文件(.apk)                         7、.apk安装得手机中运行

二、React Native开发/运行情况搭建

         假如为了“构建天生”Android APK安装文件，必要搭建如下的开发情况——极其漫长且容易堕落！：
         官网具体分析：https://www.reactnative.cn/docs/environment-setup
 1、安装Node.js（V14+）和JDK（V11+）    Java Development Kit

node  -v
javac  -version

JDK下载地点：     https://423down.lanzouo.com/iFuI6yyvnyb

一起“Next”即可完成安装

 2、安装Android Studio（原生Android开发必备工具）

        原生Android App开发工具：Android Studio — 编写Java代码来创建原生Android App。
        不必要编写原生Java代码，但是必要使用该软件安装编译Android App必须的软件开发工具包。

下载地点：https://developer.android.google.cn/studio/

一起“Next”即可完成安装，完成后默认会启动AndroidStudio

 3、运行Android Studio，安装Android SDK——开发Android应用必须的模块（类似于node_modules）

接下来开始下载快要400MB的资料....

        在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。睁开Android 12 (S)选项，确保勾选了下面这些组件（重申你必须使用稳固的署理软件，否则大概都看不到这个界面）：
· Android SDK Platform 31
· Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不必要安装此组件)
        然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。睁开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的31.0.0版本。你可以同时安装多个其他版本。
默认安装路径：
C:\Users\web\Downloads\adt-bundle-windows-x86_64-20130522\adt-bundle-windows-x86_64-20130522\sdk
 4、设置ANDROID_HOME情况变量 —— 告诉Windows：Android干系的工具地点目次

Android SDK安装目次默认在C盘，大概形如：
C:/Users/用户名/AppData/Local/Android/Sdk
具体请拜见第3步中末了一张截图里提示的 “Android SDK Location”
5、修改体系情况变量 Path

 可以在下令行窗口中输入 set  Path   检察变量是否修改乐成
 6、下载RN下令行工具，并创建脚手架项目     npx   create-react-app  项目名

npx   react-native   init    项目名

 7、编译RN脚手架项目，得到App安装文件

npx   react-native    run-android

行业小知识： Gradle —— Java项目打包构建工具                         Node.js   <=>    Webpack                         Java      <=>    Gradle

第7步中可以忽略的错误：

info Launching emulator...                         error Failed to launch emulator. Reason: Emulator exited before boot..                         warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.                         .....                         error Failed to install the app.

react-native在试着启动“AndroidStudio”中的安卓模拟器，效果失败了 —— 可以忽略，后续咱们手工启动夜神模拟器

编译构建乐成的标记：
在项目中天生了@/android/app/build/outputs/apk/app-debug.apk 文件，就分析构建乐成了
三、项目运行

        假如只是为了编写RN项目代码，在真机或模拟器上安装并运行项目，上述过程都可以跳过！
 1、下载并安装夜神模拟器：www.yeshen.com

        提示：默认模拟的是Sumsung Galaxy S10： 水中分辨率是480
 2、启动夜神模拟器，并在此中安装编译好的项目APK文件

 3、启动RN开发服务器

        在RN项目根目次下实行  npx   react-native    start     大概    npm  start
 4、修改APP的设置，指定RN调试服务器的IP和端标语，重新加载

比方：172.163.100.77:8081  

RN项目App启动常见的失败情况：                         ①夜神无法安装 或 安装后无法启动                             办理方案：换别的的安卓模拟器，比方：安定、雷电等                         ②App无法安装 或 无法启动 或 启动后闪退 或 手机直接提示“App已制止运行”                             办理方案：                                 招术1：卸载App重新安装，记得设置DebugServer的IP和端口                                 招术2：卸载并重新安装夜神                                 招术3：重新启动Windows体系，重新安装夜神，重新安装App                                  招术4：换安定模拟器                         ③App启动后提示：“Unable to load script ...”(无法从DebugServer加载内容）                           办理方案：                                 确定DebugServer处于运行状态；                                 确定查到了精确的服务器IP地点；                                 修改App的设置，指定DebugServer的IP和端口，并重新启动App。

小知识：检察当前盘算机的IP地点  —— 在cmd中实行 ipconfig  下令