用ReactNative开发鉅亨网App的经验分享

浏览量:534 发布于:2020-07-24
用ReactNative开发鉅亨网App的经验分享

身为一个 Frontend Developer,在看到 React Native 问世之后,一直对 React Native 很有兴趣,最近终于有机会可以碰到了,也因此才有这篇  劝世文 心得。本文主要想记录一下开发到目前为止所踩过的坑,为还在 Survey 技术的团队开路。

适合用 React Native 开发吗?

在接触 React Native 之前,其实我们对开发 App 是还没有信心的,一来这东西太新,二来我们也没有实际开发过 App 的经验,很多 UI 效果都要 Survey 才知道到底做不做的到,就算 Native Support 也不知道 React Native 有没有 Support?一直到我们真的把 App 上架之后,才觉得比较有一点信心。但在开始之前,先确认一下是否有对 React Native 误解:

不是 Write once, run everywhere,而是 Learn once, write anywhere

在大多数的情况下,你可以让 Android / iOS 共用同一份 code,但这不代表你可以爽爽的不管平台问题就可以实作出功能。两个平台毕竟还是有一些不样的 user experience,例如 iPhone 没有 back button,所以你需要为了 Android 多处理 back button 的 behavior。也因此在程式里头还是免不了得判断 Platform。

例如:

const styles = StyleSheet.create ? 200 : 100,
});

不过很方便的地方在于因为 React 本身就是个 View 的 Engine,因此要将 Component 拆开是轻而易举的事情,而 React Native 可以让你很轻鬆的将程式分开。

例如原本我们有一只 NewsDetailPagger.js 的 component,但由于在实作上 Android 和 iOS 上面的行为遇到不同的问题。后来就将这个 component 拆成:

就可以让两种平台在 compile 时就只 build 相对应的程式,也许之后也会有:

注:Facebook’s React Native gets backing from Microsoft and Samsung

总之,用 React Native 开发也是得考虑不同 platform 的问题,虽然 React Native 官方已经解决大多数的繁琐的部分,但你仍须思考不同平台是否适合同一套 UI / 逻辑。

React Native 不是 Webview

不要以为你原本就用 React 开发行动版网站之后就可以移植到 React Native, 基本上可共用的部分可能只有 Pure 的商业逻辑,跟 View 有关的部分都会需要重写。

React Native 的优点

整理一下用 React Native 开发的优点:

1. Debug 非常方便:

基本上如果只是 View 的 update,React Native 都已经做好 hot reload 了,只要程式码修改就会局部 rerender。

2. React 大幅降低学习成本

如果你原本就熟悉 React 的开发流程,从 React 跳进 React Native 很快,因为原本的经验是可以继续累积的,包含 React, Flux, Redux, 各种 React performance 调效的经验都是有用的。

3. 感受不到跟写 Web 有太大的差别

一开始最让我惊喜的其实是用 React Native 开发我真的不觉得我在开发 App,反而就像是多了一种特异的浏览器而已,而且 debug 也是用熟悉的 console 在 debug。react-native-debugger 也可以看到 jsx 的 tree。

用ReactNative开发鉅亨网App的经验分享
4. 专心写你的商业逻辑

基本上 React Native 已经处理掉大部分的效能问题,例如 listView 已经处理了大量列表只会显示使用者看到的部份而已。这让开发者可以专注于产品功能的实现,不用花费太多心力在调整 UI 上的效能。

5. React Native 的生态圈非常完整

awesome-react-native 有整理了几乎目前有的 resource ,包含教学,components 等等,看也看不完的东西。开源的世界就是这幺迷人,based on 全世界工程师的开发与回馈造就健壮的社群。

6. Frontend resource

藉由 React Native,自此前端工程师可以支援 App 的开发,开发 UI 上的经验可以共用,对于组织内人力的配置也可以更加灵活弹性。

7. UI Explorer

UI Explorer 列出了几乎所有 React Native 支援的 component 与範例,看 UIExplorer 有时比文件写得更完整。

react-native 的缺点

虽然开发到现在觉得很满意,不过还是得列一下缺点。

1. 掰咖的 style

React Native 用 javascript 来实现 css 的设计 ,但并不是支援所有的属性,例如 z-index 。

没有 image-background,没有 background-repeat 等等。不过虽然少了这些东西,大部分的需求还是可以想办法实现的,也可以藉由 react-native-svg 做到很多漂亮的 UI。

2. 各种踩坑

一开始在用 navigator 时用了 NavigationExperimental,但由于是 experimental,每次 React Native 更新都有 API change,因此每次都要随着更新。

像是这个新闻内页左右翻动的功能,看似很简单,但因为资料是动态的,所以尝试了好几种 pagger 的实作,最后是用 react-native-viewpager

用ReactNative开发鉅亨网App的经验分享
3. 升级总是很痛苦

React Native 每两週就会 realease 一个版本,这使得我们在开发到第一次上架成功之间就升级了无数次,第一个版本是 0.21,到目前为止已经是 0.30,中间有几次升级是非常重大的更新,很多相依的 package 也要跟着更新才能顺利更新上去。

小结

React Native 让前端工程师可以站在巨人的肩膀上更快速的开发,虽然到目前为止在实作中还是有许多地雷,但相信在 Open Source 的基础下会更加的茁壮,若您在开发的 App 功能都没有跳脱 UI Explorer 的範例,相信要用 React Native 来开发可以相对的降低开发的时间与成本。最后,鉅亨网的前端团队目前也在徵 资深前端开发者 喔!