阅读 175

初识 React-Native —— 开发环境搭建、选择和坑点

前言 (废话)

上次搞完小程序,老大说接下来有个项目,可能需要做 App 。我心想,先是管理后台、接着是 H5、再到 小程序,这回又搞 App 。要是这次搞完 App 那我岂不是也算多端通吃啦!?前端入职一年一个月,都摸了一遍,咱也算见过世面的人了🤣,你说是吧。顿时干劲十足!

由于团队中没有专职做 Android/IOS 的小伙伴。自然就想到了跨端界的 「三大天王」 —— 「uni-app(内置weex)」、「React-Native」、「Flutter」。看到这三个框架,身体本能是选「uni-app」的,毕竟自己对 Vue 比较熟悉。人都是想偷懒的嘛。当我还在犹豫怎么选的时候,老大直接就拍板了,我们用「React-Native」。老大是搞后端的,之前团队基本都是用 Vue 的,也不知道他选择的原因。后来想想也无所谓,既然都没用过这三个框架开发 APP,反正都是要学,都行。毕竟技多不压身嘛!干就完事!

发现网上关于 「React-Native」的文章有些少,决定把自己的一些踩坑经验分享,也许能帮到大家呢。

下面是三个框架对比的文章,感兴趣可以看一下:

ask.dcloud.net.cn/article/360…

www.gushiciku.cn/pl/pA6U

开发环境的选择

React Native 开发环境搭建对于没接触过 App 开发的朋友(我自己)来说是比较繁琐。有很多坑点,所以在搞事情之前,请做好心理准备。

开发环境安装教程—— 「官方文档」

常规方式

Andorid

Windows 和 Mac 都可以安装 Android Studio 进行开发调试

  • 安装 Android Studio,并下载SDK、模拟器系统镜像、NDK等配置
  • 安装 Java 并配置环境变量
  • 安装 Node

IOS

只有 Mac 能下载 Xcode。Windows 可以通过 VMware(虚拟机) 安装 Mac OS,再安装Xcode 理论上是可以实现的,本人没有试过,请自行踩坑

「VMware 安装 Mac OS 教程 」

  • 安装 Xcode
  • 安装 Watchman (用于实时更新视图)
  • 安装 CocoaPods (管理依赖,RN 0.60以上版本需要)
  • 安装 Node

曲线救国 —— Expo

假如你是 Window 用户要开发 IOS App,又不想装虚拟机这么麻烦, Expo 应该是不错的选择。 你甚至不用搭建 Android 和 IOS 的开发环境 !调试也很方便,扫一下二维码,然后就可以实时预览你的项目了。

当然 Expo 还有很多功能。例如,热更新、快速发布应用平台「Goolgle Play Store 和 App Store」。Expo 还可以解构成原生的 React Native 项目,然后用 Android Studio 和 Xcode 调试

既然 Expo 那么好为什么不用 Expo 呢?有利必有弊嘛

缺点「以下是笔友了解到的,不一定百分百准确」:

  • Expo 实际上是在 React Native 的基础上封装了一层。很多原生的功能都通过 JavaScript 来实现,这对于前端开发来说是好事,但是有些时候 Expo 提供的原生能力不能满足我们的需求,而 Expo 又不能直接使用原生的code(不会原生code 的我是不是就不用担心了🤣) ,就需要通过 expo eject 来解构成原生的 React Native 项目;
  • 打包生成的安装包体积比原生的大;
  • 部分 React Native 第三方库无法直接使用
  • Expo 热更新的 jsbundle 放在亚马逊的云服务器上的,国内网络环境的原因,可能下载不了或者很慢(听说是这样,其实也不算缺点,毕竟原生 React Native 项目还要自己搭建)

Expo 相关文章「推荐阅读」:

「Expo 官方文档」

「React Native 原生项目 和 Expo 项目的区别」

「Expo 项目开发记录」

生成项目的脚手架

  • react-native-cli 「官方提供」

原汁原味,没啥好说

内置 expo ,不用手动搭建,有多种模板可以选择

expo 官方提供的脚手架

开发环境安装

本人用的是 Windows 的 Android Studio,Mac 的 Andorid Studio 和 Xcode 请自行踩坑

文章主要说一下自己碰到的坑。请参考官网文档 —— 「开发环境搭建」

安装准备:

  • 自备梯子 (很有依赖需要梯子才能下载)
  • 耐心、耐心、耐心

坑点:

  1. Node 版本请下载大于12,小于 12.9 的版本,亲测 RN 0.59 和 RN 6.1 ,Node 12.11 在运行 react native start 时报错;

  2. Gradle 下载完依赖之后,运行报错,可以适当调低Gradle插件和Gradle版本,两种方式调整。插件版本是有联系的,「Gradle插件和Gradle版本对照表」

  • Android Studio (方式一)

微信图片_20210719183419.png

  • android/build.gradleandroid/gradle/wrapper/gradle-wrapper.properties(方式二)

android/build.gradle

dependencies {
// 这里版本是3.3.1
classpath('com.android.tools.build:gradle:3.3.1')
}
复制代码

android/gradle/wrapper/gradle-wrapper.properties

//这里版本是4.10.2
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-bin.zip

复制代码
  1. Java 请下载 Java 8 !

持续踩坑中...后面看情况更新。

文章分类
前端