React Native入坑不完全指南

225 阅读4分钟

前言

React Native,基于React的一个库,可以让web开发者使用JavaScript开发App,一套代码可以跨安卓和IOS,帮助公司省了安卓和IOS开发。但毕竟它是用来开发App的,所以不仅需要web开发者掌握web的开发技能,也要了解一部分App的开发知识,比如,开发安卓应用,你要懂点Java吧,要懂安卓的一些基础的东西吧。下面,我就根据自己的开发经历,梳理一份React Native的上手指南,带领读者入坑,当然,下面写的东西大多都能在React Native 官网找到,我只是梳理一些自己觉得比较重要的一些东西,而且本文更多的是针对安卓来讲,毕竟公司开发的App只需要支持安卓,所以我对IOS了解的不多。由于本人才疏学浅,如果有写错的地方,烦请大佬在评论区加以指点。

一、安卓环境搭建

环境搭建是开发的第一步,Java语言不仅可以作为web开发的后端语言,还可以用来开发安卓,所以首先是配置Java环境变量,直接去Oracle官网下载,版本选择1.8,具体步骤不清楚的可以看看这篇菜鸟教程。然后是node环境,node版本必须大于等于12,这里推荐用nvm来管理自己的node版本,另外,官网不推荐使用cnpm,可以会带来一些其他问题,可以使用Yarn。接着就是最蛋疼的一个环境了,即安卓环境。具体的步骤官网已经描述的比较清楚,可以直接看官网的环境搭建。我们日常开发写代码可能并不会用Android Studio来跑项目,而是用我们熟悉的vs code,但是Android Studio可以用来下载和管理我们的Android SDK和模拟器。针对安卓环境搭建遇到的一些问题,下面我贴上一些文章连接,以帮助你更快地解决问题。

 三、关于React Native组件和模块

截至目前,RN最新的版本为0.66.4,还没有1.0版本,所以RN本身并不是很成熟,就更别提RN的生态了。像web开发可能引进一个UI库基本上就能cover日常的需求了,最多加一下二次封装,而目前并没有一个为RN打造的比较完善的UI库。在我们日常的开发中,可以用官网提供的组件,但是官网提供的组件很多并不适合日常需求,这时候要么我们自己对官网组件做一些二次封装,要不自己去调用原生组件供RN调用,再者就是使用其他的一些第三方包。关于第三方包,这里给一个链接供参考。

那如果官网的组件和模块以及第三方库都不能满足需求呢?这时候就需要我们自己去调用原生组件或模块并做一些封装,然后再供RN调用,具体怎么做呢,可以看看官网的这两篇文章,上面也提供了示例。

四、关于调试和打包发布

开发常用命令:

  • adb shell input keyevent 82

  • adb devices

  • adb kill-server

  • adb-start server 

  • adb install xxx.apk

  • gradlew assembleRelease

在开发app的适合,并不能在浏览器上查看网络请求以及元素。在使用真机进行调试的时候,可以使用抓包工具抓网络请求,这里推荐使用whistle+chrome插件:SwitchyOmega进行抓包。虽然不能在浏览器上查看网络请求和元素,但是我们可以在浏览器上查看打印日志,在你已经用usb模式连上真机或者开了模拟器后,可以用adb shell input keyevent 82命令唤起调试菜单,点击菜单的debug选项便可以打开浏览器debugger。具体可以查看官网的这一章节

如果你已经安装了android sdk,你可以使用adb devices命令查看已经连接的安卓设备或者模拟器。开发完毕后,这时候需要打包,在安卓目录下打开cmd,用gradlew assembleRelease命令进行打包打完包后,可以使用adb install xxx.apk安装app到安卓设备上。对于未发布的安卓应用,Android 9对api网络访问做了限制,如果你打了包之后发现在发送网络请求的时候报Network request faild,这时候可以看看上面贴的文章链接。

五、最后

关于上手指南大概就讲这么多了,后面有想到再进行补充,如果觉得有用请点个赞哦,谢谢。