一、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 命令 |
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
