Taro轉(zhuǎn)React-Native的實踐總結(jié)和分析思考

本文始發(fā)于我的博文Taro轉(zhuǎn)React-Native的實踐總結(jié)和分析思考，現(xiàn)轉(zhuǎn)發(fā)至此央渣。

一厌杜、前言

Taro 是一套遵循 React 語法規(guī)范的 多端開發(fā) 解決方案堪滨。

使用 Taro，我們可以只書寫一套代碼蕾各，再通過 Taro 的編譯工具扒磁，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節(jié)跳動/QQ/京東小程序、快應(yīng)用式曲、H5妨托、React-Native 等）運行的代碼。

*摘自Taro 介紹

Taro是一套優(yōu)秀的多端開發(fā)解決方案检访。我們團隊自較早期時(18年底)便開始了深入研究始鱼，并投入到豐富的微信小程序開發(fā)實踐中，同時作者還負責(zé)團隊Taro轉(zhuǎn)百度/字節(jié)跳動/React-Native的項目脆贵。

本文將介紹Taro轉(zhuǎn)React-Native的項目框架医清、Taro轉(zhuǎn)React-Native過程中遇到的問題和解決方案、RN的熱更新卖氨，以及框架相關(guān)的思考会烙。

項目完成于去年(2019年)，最近才抽空重新修改了總結(jié)文檔放到博客上筒捺。因此可能有些轉(zhuǎn)換細節(jié)不是最新的柏腻，請留意。

二系吭、項目實踐

Taro 轉(zhuǎn) React-Native（以下簡稱RN） 項目五嫂，目前應(yīng)用于將“美梨工坊桌面”項目（Taro）轉(zhuǎn)換成美梨桌面 iOS App（基于 RN 進行封裝的 App 殼），是 App 的 RN 內(nèi)置包系統(tǒng)肯尺，主要功能為 RN 所有功能的展現(xiàn)沃缘，包括協(xié)作項目開發(fā)、頁面展示则吟、公共 Bundle槐臀、熱更新、預(yù)下載氓仲、一鍵部署等特性水慨。

作用：讓客戶端/前端團隊能支持更靈活的開發(fā)協(xié)作得糜、節(jié)省開發(fā)成本、支持及時處理線上問題晰洒。

2.1 整體框架

包含以下四個方面朝抖。

開發(fā)鏈路

  • 基于 NPM 的 Web 開發(fā)體驗
  • 基于 Webpack 構(gòu)建，完整的項目管理
  • React-Native 二次組件欢顷、工具集合類

打包鏈路

  • 自動打包槽棍、隨版本生成配置
  • 持續(xù)集成、部署抬驴、交付

發(fā)布鏈路

  • git webhook炼七，自動發(fā)布
  • 后臺 API，OSS 自動上傳
  • 發(fā)布配置后臺布持，通知提醒

Native 支持

  • 推送功能支持
  • 原生路由至 RN 頁面支持
  • Bundle 文件和資源文件的更新

2.2 RN 準(zhǔn)備工作

目前只在 iOS 平臺上做部署豌拙，所以只展開 iOS 端的準(zhǔn)備工作。

  • 安裝依賴庫
brew install node
brew install watchman
  • 安裝 React-Native 命令行工具
npm install -g yarn react-native-cli
  • 安裝 Xcode
  • 在 config/index.js 文件中配置：
rn: {
  appJson: {
    name: 'MeiliDesktop',
  },
}

相關(guān)開發(fā)鏈接：

2.3 遇到的問題

主要列舉 Taro 轉(zhuǎn)換 React-Native 過程中遇到的問題及處理方法题暖。

2.3.1 環(huán)境/依賴庫相關(guān)問題

  • node-sass

執(zhí)行項目 yarn按傅，安裝 node-sass 庫會失敗，根據(jù) node-sass 官網(wǎng)文檔胧卤，切換源并使用 npm 可以成功：

npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
npm install node-sass
  • fbjs

提示找不到 fbjs唯绍，添加該庫并執(zhí)行安裝。

  • NervJS/taro-native-shell 殼子應(yīng)用編譯失敗

文檔建議使用 NervJS/taro-native-shell 工程枝誊，該工程是 RN 工程中原生的部分况芒。

可能會遇到環(huán)境或 Xcode 版本兼容問題，可以自行生成殼子工程叶撒。

react-native init AwesomeProject
  • The UMNativeModulesProxy native module is not exported through NativeModules

使用自行生成的殼子工程需要自行安裝依賴react-native-unimodules绝骚，添加到package.json的dependencies中。

  • selector hasGrantedPermission

react-native-unimodules使用的是 0.7.0 版本祠够，發(fā)現(xiàn)換成 0.6.0 即可解決压汪。

"react-native-unimodules": "0.6.0"

2.3.2 組件/樣式問題

  • Invariant Violation: Text strings must be rendered within a component.

文字需要包在 Text 組件里面

<View className='page-order-detail__content'>
    {steps && steps.length && (<View></View>)
</View>

上面的代碼也會提示錯誤，需要改成：

<View className='page-order-detail__content'>
    {steps && steps.length > 0 && (<View></View>)
</View>
  • Input 設(shè)置line-height會導(dǎo)致輸入內(nèi)容顯示異常

內(nèi)容會顯示偏下并被遮擋

  • Text 組件不支持設(shè)置圓角等
  • Input 不支持設(shè)置Height
  • 400,700古瓤，normal 或 bold 之外的 font-weight 值在Android上的React-Native中沒有效果
  • 不支持100vh設(shè)置
  • 其他不支持的樣式

React-Native的樣式基于開源的跨平臺布局引擎 Yoga 止剖，樣式基本上是實現(xiàn)了 CSS 的一個子集，所以會有些樣式不支持落君，在出錯時會給出支持的樣式列表穿香。如 RN 不支持針對某一邊設(shè)置 style，即 border-bottom-style 會報錯叽奥。

  • 必須使用 Flex 布局
  • 文字要包在 Text 組件里面，否則不顯示
  • position:fixed React-Native 不支持
  • 樣式選擇器僅支持類選擇器痛侍，且不支持 組合器
  • RN 中 View 標(biāo)簽?zāi)J主軸方向是 column

如果需要兼容各端朝氓，最好在布局中顯式聲明主軸方向魔市。

2.3.3 其他問題

  • 不支持同步的 Storage 存取

即不支持Taro.setStorageSync和Taro.getStorageSync兩個同步方法，因此需要對已有代碼進行重構(gòu)赵哲，使用async/await和Promise進行處理待德。

  • 找不到方法/函數(shù)

所有的方法參數(shù)傳遞，需要bind(this)

  • this.setState is not a function

尋找未添加bind(this)的方法參數(shù)傳遞枫夺，添加bind(this)

  • componentWillMount()即將廢棄

使用componentDidMount()實現(xiàn)

  • 沒有讀取文件并進行 base64 編碼

使用rn-fetch-blob庫解決将宪。

2.3.4 其他參考

Taro 官方提供了各端開發(fā)前注意事項，特別是使用 RN 的樣式區(qū)別橡庞。

Taro 官方提供了最佳實踐较坛，可以參考。

Taro 官方提供了更多資源扒最，可以查看其他團隊的文章分享和遇到的問題解決丑勤。

2.4 熱更新方案

目前業(yè)界 RN 熱更新方案同樣分為 全量更新 和 增量更新。原理同 Weex 類似吧趣，此處不再贅述法竞。

全量更新分為兩部分，即Bundle文件和資源的更新强挫。

  • 目前方案

當(dāng)前項目頁面較少岔霸，整個 Bundle 文件不到 2MB，目前使用全量更新俯渤。

資源文件夾先壓縮再上傳呆细；App端下載后進行md5驗證，驗證通過則解壓到緩存目錄稠诲。

在下次重新打開 App 才讀取緩存的Bundle和 資源侦鹏。

接口格式可參考以下方案：

{
    "error_code": 0,
    "error_message": "成功",
    "data": {
        "bundle": {
            "version": "190108174500",
            "url": "https://xxx/main.jsbundle",
            "md5": "xxx"
        },
        "assets": {
            "version": "190108174500",
            "url": "https://xxx/assets.zip",
            "md5": "xxx"
        }
    }
}

因為該項目的用戶是公司內(nèi)部員工，目前第一版臀叙，所以沒有對復(fù)雜情況進行處理略水，后續(xù)應(yīng)用后再持續(xù)設(shè)計。

如支持不同設(shè)備或不同App版本使用不同的Bundle等等劝萤。

  • Pushy

目前官方推薦熱更新框架Pushy渊涝，可以了解下，原理都是差不多的床嫌，實現(xiàn)會更方便跨释。

2.5 相關(guān)命令及其作用

  • Taro 轉(zhuǎn) RN
taro build --type rn
  • 調(diào)試代碼
taro build --type rn --watch
  • 打包 RN Bundle 和資源
cd rn_temp && node ../node_modules/react-native/local-cli/cli.js bundle --entry-file ./rn_temp/index.js --bundle-output ./bundle/main.jsbundle --assets-dest ./bundle --dev false

執(zhí)行 Taro 轉(zhuǎn) RN 命令后，在項目中會生成 rn_temp 文件夾厌处，該文件夾即完整的 RN 代碼鳖谈，打包 RN 需要進入該目錄執(zhí)行。

打包后會生成 Bundle 文件和資源文件夾阔涉，用于替換原生保存的 RN 內(nèi)容缆娃。

三捷绒、總結(jié)

  • 友好度——轉(zhuǎn)換工作復(fù)雜度

由于作者是開發(fā)iOS客戶端的，且于4年前已經(jīng)在現(xiàn)有項目中集成過React-Native頁面贯要，對React-Native的原理和機制有過研究暖侨，實踐過相關(guān)技術(shù)棧，所以轉(zhuǎn)換工作相對容易崇渗。

對于不是客戶端出身字逗，或者不熟悉React-Native/Weex等客戶端跨平臺框架的機制和技術(shù)棧的同學(xué)，需要做點其他功課宅广。

  • 多端適配以React-Native樣式為主

如果需要適配多端葫掉，需要以 React-Native 的約束來管理樣式。

因為樣式上H5最為靈活乘碑，小程序次之挖息，React-Native最弱（React-Native的樣式基于開源的跨平臺布局引擎 Yoga ，樣式基本上是實現(xiàn)了 CSS 的一個子集）兽肤，統(tǒng)一多端樣式即是對齊短板套腹，也就是要以 React-Native 的約束來管理樣式，同時兼顧小程序的限制资铡。

  • Taro-> React-Native -> iOS/Android鏈條長

通過 Taro 轉(zhuǎn)React-Native电禀，React-Native再轉(zhuǎn)iOS/Android，鏈條過長笤休，會面臨復(fù)雜度增加尖飞、維護成本較大、組件適配店雅、客戶端系統(tǒng)版本和語言升級維護等問題政基，同時影響一些復(fù)雜功能的實現(xiàn)方案的決策和估時。

毫無疑問闹啦，這是復(fù)雜度非常高的架構(gòu)設(shè)計沮明，對開發(fā)人員的能力和各方面經(jīng)驗有較高要求。

為了盡早覆蓋跨客戶端窍奋，Taro官方選擇 React-Native無疑是最快速和易行的方案荐健。

  • 跨端效果和質(zhì)量

總體而言，在功能不復(fù)雜的項目中琳袄，進行Taro轉(zhuǎn)換React-Native江场，雖然修改較多但都不算難處理，雖有幾處轉(zhuǎn)換問題需等官方處理窖逗，但轉(zhuǎn)換后的效果和質(zhì)量還算OK址否。

-END-
歡迎到我的博客交流：https://zackzheng.info

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市碎紊，隨后出現(xiàn)的幾起案子佑附，更是在濱河造成了極大的恐慌用含，老刑警劉巖，帶你破解...
    沈念sama閱讀 217,277評論 6贊 503
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件帮匾，死亡現(xiàn)場離奇詭異，居然都是意外死亡痴鳄，警方通過查閱死者的電腦和手機瘟斜，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3贊 393
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來痪寻，“玉大人螺句，你說我怎么就攤上這事∠鹄啵” “怎么了蛇尚？”我有些...
    開封第一講書人閱讀 163,624評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長顾画。 經(jīng)常有香客問我取劫，道長，這世上最難降的妖魔是什么研侣？ 我笑而不...
    開封第一講書人閱讀 58,356評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任谱邪，我火速辦了婚禮，結(jié)果婚禮上庶诡，老公的妹妹穿的比我還像新娘惦银。我一直安慰自己，他們只是感情好末誓，可當(dāng)我...
    茶點故事閱讀 67,402評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布扯俱。 她就那樣靜靜地躺著，像睡著了一般喇澡。 火紅的嫁衣襯著肌膚如雪迅栅。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,292評論 1贊 301
  • 城市分裂傳說
    那天撩幽，我揣著相機與錄音库继，去河邊找鬼。 笑死窜醉，一個胖子當(dāng)著我的面吹牛宪萄，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播榨惰，決...
    沈念sama閱讀 40,135評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼拜英，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了琅催？” 一聲冷哼從身側(cè)響起居凶，我...
    開封第一講書人閱讀 38,992評論 0贊 275
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤虫给，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后侠碧，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體抹估，經(jīng)...
    沈念sama閱讀 45,429評論 1贊 314
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3贊 334
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年弄兜，在試婚紗的時候發(fā)現(xiàn)自己被綠了药蜻。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡替饿，死狀恐怖语泽，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情视卢，我是刑警寧澤踱卵，帶...
    沈念sama閱讀 35,492評論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站据过，受9級特大地震影響惋砂，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜绳锅，卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3贊 328
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一班利、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧榨呆，春花似錦罗标、人聲如沸肋杖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽省店。三九已至竿拆，卻和暖如春宙拉，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背丙笋。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工谢澈， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人御板。 一個月前我還...
    沈念sama閱讀 47,891評論 2贊 370
  • 代替公主和親
    正文 我出身青樓锥忿，卻偏偏與公主長得像，于是被迫代替她去往敵國和親怠肋。 傳聞我的和親對象是個殘疾皇子敬鬓，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,713評論 2贊 354