JB的React Native 之旅-环境搭建及概念了解

android studio 下载 | 2018-11-05 15:34

先说下背景吧,并非说做开发,而且最近在有个产品是用React Native做的,当然已经顺利发布了,但是呢,有个问题,就是打包太久了,平均下来,打一次包要20分钟,像在项目后期,要一下子打好几个包,由于公司只有一台打包机,就一直在等了,效率是个大问题;

这个问题跟研发反馈了,但是没时间处理,而且研发也觉得不是大问题,能用就好~

但受害者是测试啊,所以这个问题只能靠自己了,那就自己搭环境,自己跟进这个问题吧~

React Native是啥?

别笑,小弟真的不知道; 开玩笑的,RN很出名了,是Facebook开源的JS框架React在原生移动平台的衍生物,一套代码支持安卓跟IOS,很牛逼的说;

最重要是跨平台!!

这3个,到底有啥关系?

React 是基础框架,提供了一套基础设计实现理念,并不能直接用来开发,就好比马克思主义对于我党的作用一样。

React.js 是在React理念的指导下产生的专门用来开发网页的框架.与React同时出现和发展,React的相关概念都在React.js文档中。

React Native 是用来开发移动应用。 需要用到React概念,但是不需要React.js的东西。

1)学习React Native 需要了解基础的JavaScript基础知识

2)最好了解一下android跟ios其中一门开发,因为react native偶尔需要借助原生的代码是实现

React Native支持混合开发,大致分为三种情况。

UI界面由React Native开发, 但UI事件处理由原生代码执行;

将原来使用的原生代码实现的UI小部件包装成React Native的自定义控件;

应用界面在ReactNative开发的界面与原生代码开发的界面间进行切换,React Native的强项就是UI开发,在混合开发中,能用React Native开发的界面,优先用React Native开发.

可以大大节省开发成本,百分之90多界面可以通过RN开发,一份代码可以适配android和ios;

RN有独特的UI实现框架,借助组件化开发是团队规模更容易进行跳转,可以达到快速迭代的效果;

RN可以通过一些手段自动匹配不同屏幕大小的手机,再也不用自己去计算视图大小和位置;

RN开发的程序内存消耗略搞,开发模式下开销大几十M,发布后差异不大,内存占用会比较高;

运行速度慢;

安装包比原生代码在安装包大;

这里只介绍Windows下搭建安卓的,如果是其他平台或者需要搭建IOS的,请移步到此处查看;

首先,是需要安装nodejs,直接点击nodejs官网即可下载,这里需要注意,要求node版本要在4.0以上,确保正常,直接在官网下载最新的版本吧;

直接点击后,就会自动下载,下载完毕后,一键默认安装,点点点就好了,这里不说明;

安装完成,点击开始=》运行=》输入"cmd" =>node -v

如果能正常显示版本号,则说明已经安装成功,如果不能显示版本号,则把nodejs的安装路径配置到path环境变量,重试即可;

直接网上搜索Android Studio下载安装就行了,但是部分资源网速过慢,这里提供一个3.1.2版本的链接,需要的同学自取:

安装后可直接升级到3.1.4版本;

安装后打开,安装sdk,自行选择需要的sdk进行下载即可,需要点时间,如下:

下载完android studio跟sdk,那就配置环境变量;

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为

ANDROID_HOME的环境变量,指向你的 Android SDK 所在的目录,SDK 默认是安装在下面的目录:

c:\Users\你的用户名\AppData\Local\Android\Sdk

顺便把Android SDK的Tools目录添加到PATH变量中,比如adb这种工具还是能用到的;

Ok,安卓相关的配置,就到此为止了,接下来看React Native;

1)安装react-native命令行工具

npm install -g react-native-cli

如果不行,可以切换镜像源,然后再次输入下上面的命令:

npm config set registry --global

npm config set disturl --global

2)创建项目,进入工作目录,运行:

mkdir react-native-jbtest

cd react-native-jbtest

react-native init jbtestproject

然后就耐心等待一段时间吧

3)运行packager

cd jbtestproject

react-native start

看到这样,就说明可以了;

4)安卓运行,保持packager开启,另外打开一个新的命令行窗口,然后再工程目录下运行:

react-native run-android

首次运行需要等待数分钟并从网上下载gradle依赖; 正常来说,此时应该看到这样的界面:

当看到上面这图片时,说明已经成功了,接下来就可以愉悦的开发了;

一般这种环境配置的问题,肯定不会一帆风顺的,表面上的一帆风险,实际是经历过大风大浪的;

原因是因为没有配置ANDROID_HOME,那就老老实实配置下吧~

2)手机安装后,屏幕显示红色

网上说好多解决方案,比如改host,设置native version版本跟JS一致等方案,但是试了没一个可行。。

然后就换了台5.X的手机,瞬间,错误提示变成这个~

然后看了下,本地JS报这个错:

该错误信息说明在在ndk的主目录文件夹下找不到“ndk-build”文件,因为Android Studio未自带NDK开发工具,因此会出现此错误。 到此点击打开链接下载对应版本,下载完毕后将其解压,将其内部的所有文件全部移动至新建的ndk-build文件夹下;

但依然报上面红色提示框的错误:error code 500,继续看, js报 Unable to resolve module AccessibilityInfo;

看了下版本:

C:\WINDOWS\system32>react-native -v

react-native-cli: 2.0.1

react-native: 0.56.0

网上建议是降低版本,如下处理:

先卸载:

C:\WINDOWS\system32>npm uninstall -g react-native-cli

removed 41 packages in 3.999s

安装指定版本:

npm install react-native@0.55.4

继续安装:

npm install -g react-native-cli@1.2.0

再项目初始化的时候指定下

react-native init --version="0.55.4" myprojectname

然后继续红屏,继续看, JS报错,Module build failed: Error: Plugin 0 specified in “base” … provided an invalid property of “default”

执行下面这命令就可以了:

npm install --save-dev babel-preset-react-native@2.1.0

至此,终于看到了这个界面了,连之前有问题的4.X都可以正常了,可喜可贺~:

> Could not read script 'C:\Users\jb\gitprojects\jb\node_modules\react-native\react.gradle'as it does not exist.

原因是没有node_modules这个目录,怎么解决?直接在这个工程下执行npm install 即可

本文主要介绍了React Native的一些基础知识,以及在Windows下如何搭建环境,入门篇;

谢谢大家~