RN框架和Flutter介绍1

Posted 2021-04-29 万云阁主

 

先介绍RN框架。RN框架是react native的简称，该框架源自FB(Face Book)公司开源，目前使用范围非常广泛。我们做网页前端或者html5页面的，对vue+react极其熟悉，事实上对react native,同样是应用广泛的，主要用于开发双端(android+ios)的应用开发。这个框架有一个极其大的优势，支持app端热更新，也是因为这个缘故，所以使用react native开发app的不在少数，甚至绝大多数的大厂，也在积极采用这个框架。本文作者并不打算讲解RN的历史，这些知识可以从百度或者谷歌获取，今天文章主要介绍的是，如何在windows端去安装RN环境，以及介绍一下使用RN打一个安卓的包，ios的则不需要了。

 

由于本文是实际参考RN中文官网而来的，所以这里面的所有细节，本文将详实提供。本文假定开发者是一个有一定经验的工程师，所以对于那些常用的环境，假定已经安装完毕，例如一般必须安装的有nodejs,python,jdk环境。这是最基础的一点，如果是刚入门的，可以参考百度查询安装Nodejs,python2.7.x,jdk1.8的方式，并且搭建这个基础。

 

 

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

 

react-native init demo

这样我们已经创建一个react native项目了。那么如何运行。这里有两种方式，一种是安装AS，使用AS运行调试到手机端或者模拟器端。另外一种是直接命令行，将编译得到的apk运行到模拟器或者手机端。这里为了追求简洁，使用模拟器。

 

这里下载了夜神安卓模拟器，安装成功，开始adb 连接之。连接命令：

adb.exe connect 127.0.0.1:62001

连接成功之后，开始执行编译和运行apk。

cd demo

react-native run-android

由于本文作者比较偏向于轻量级的软件，所以不打算推荐AS软件，AS框架实在庞大，不适合轻量级开发，所以采用了VSCode开发工具。

注意，一般情况下我们运行的RN demo会出现运行错误:

这里整理一个解决方案。解决方案如下:

Step1: 在安卓项目目录android/app/src/main下面创建文件夹assets

Step2: 在安卓项目所在的目录执行命令行

eact-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

这个时候查看项目中是否存在index.android.js文件，如果存在就直接执行上面的命令行，如果不存在，执行会报错，提示找不到index.android.js文件，那么我们将index.android.js改成index.js文件。以上命令成功执行之后，会在assets中生成index.android.bundle文件。

Step3: 在安卓项目中执行react-native run-android，这个时候demo可以正常跑起来了。页面如下