React-Native轉小程序調研報告：Taro & Alita

一. 咱們的要求

指望的要求

1. 基於React語法，將RN項目轉化爲小程序項目

2. 該小程序能同時在 微信小程序 和 支付寶小程序這兩個平臺運行

底線要求

底線是能轉成微信小程序，由於目前來講，由於微信先發制人，再加上微信自己的用戶黏性，致使在小程序這一塊大多數其餘平臺都難以迎頭遇上，包括支付寶小程序，百度小程序，頭條小程序等等。

二. 目前可供選擇的生態,以及各自存在的問題

1. 能將已有RN項目轉化爲微信小程序的工具， 好比 Alita ，但它不能轉成支付寶或其餘小程序

2. 從零開發的多端框架，好比Taro（京東），chameleon（滴滴）, uni-app等等，問題在於：不少框架，好比uni-app，chameleon是基於Vue語法的，沒法適用咱們React項目的狀況

3. 專門設計的微信小程序框架（mpvue,webpy） ，問題也是和上面相似，Vue的語法，並且只是針對微信小程序的

三. 最終的工具選擇:Alita && Taro

綜合咱們對React語法的要求，以及對平臺轉化的需求，最終以爲比較合適的有兩個工具/框架，分別是Alita 和 Taro

Alita介紹

• Alita介紹：它是京東的ARES多端技術團隊，開發的React Native一鍵轉化爲微信小程序的工具。不過只能轉成微信小程序，不能專成支付寶小程序

• Alita的特性： Alita不是新的框架，也沒有提出新的語法規則，她只作一件事，就是把你的React Native代碼運行在微信小程序端。因此Alita的侵入性很低，選用與否，並不會對你的原有React Native開發方式形成太大影響。

Taro 介紹

• Taro介紹：它是由京東凹凸實驗室開發的多端框架

• Taro的定位：它和Alita不一樣，不是既有項目的轉化工具，而是從零開始開發的多端框架。

• Taro特性：使用 Taro，咱們能夠只書寫一套代碼，再經過 Taro 的編譯工具，將源代碼分別編譯出能夠在不一樣端（微信/百度/支付寶/字節跳動/QQ小程序、快應用、H五、React-Native 等）運行的代碼。

四. Alita && Taro 的調研總結

改形成本的對比

咱們上面說了，Alita是將既有的React-Native項目轉化爲微信小程序框架的工具，那麼它是否是輕輕鬆鬆就能實現一鍵轉化呢？ 其實不是的，Alita也要求你要徹底遵循它的語法規則才能轉化成功，不然那個文件將不會轉化，這就須要對原有項目進行改造了

Taro天然也是這樣了，由於它自己就是一套多端框架，也須要修改爲它的代碼規範才能運行

綜合對比

 

五. 採用 Alita 方案的改造思路

Alita能夠經過運行下面命令的方式基於已有的RN項目生成一個新的小程序項目

alita -i rnProject -o wxProject

不過問題在於，必需要修改代碼以符合Alita的轉化條件（一開始想着能一鍵轉化，空手套小程序的我仍是太單純了。。）

 

問題復現： 若是不對原有代碼改造就轉化會怎樣？

1.根據官方案例提供的example，本來目錄c下有一個文件：index.js，正確打包後以下圖所示

 

2.我這裏寫入一個Alita禁止的寫法： 使用as關鍵字

 

// 修改前的 good style 
import React, {Component } from 'react';
// 修改後的 bad style
import React, {Component as BadComponent} from 'react';
export default class C extends BadComponent { 

}

 

 

本來打包後c目錄下本來有文件的，如今啥都沒有了

 

 

3.也就是說項目中必定不能有上面所講的Alita禁止的寫法，必需要進行轉化

 

藉助eslint排查和修改不符合alita風格的代碼

首先咱們要把Alita提供的eslint插件導入項目，把不符合Alita要求的代碼風格改掉，咱們來看下eslint有哪些規則

 

Alita轉化前代碼風格修改流程

注意一個問題：並非全部有問題的代碼風格alita的eslint插件都會作提示，實際上，它只會對80%的有問題的代碼報出警告，因此有部分代碼風格咱們是要手動發現和修改的。因此我把問題分紅了三類，分別按三種方式處理

A類問題

這些不符合eslint的代碼是會有警告的

解決辦法：逐個文件過一遍，把警告消除就好

• 高階組件限制，也就是路由深度不大於5層

• 動畫組件要使用alita的

• 靜態限制

• global變量不容許使用

• 一個文件最多隻能定義一個組件

• React Native基本組件不支持屬性展開

• this.props.xxComponent 要寫徹底

• 使用高階組件

B類問題

這些問題，eslint插件沒有提示,同時根據咱們的使用習慣，有可能會這樣用的代碼風格

解決辦法：下面的大多數問題，均可以經過搜索的方式，找出問題並解決

備註：下面的「（數字）」在 參考資料中找到對應的條目，查看細節解釋

• 路由組件須要用@areslabs/router

• ref 必須是方法，不支持字符串

• 不支持 onLayout 方法

• 代碼體積限制：壓縮的代碼小於 4M，分包 8M，大於的話就不行

• 函數組件在定義時候沒有同時導出

C類問題

這些約束，eslint插件沒有提示,可是咱們通常都不會這麼寫，除非做死

解決辦法： 發現有問題再來排查

備註：下面的「（數字）」在 參考資料中找到對應的條目，查看細節解釋

• for循環中返回組件，key不指定

• 做爲props的組件進行多層級傳遞

• 從外部引用JSX片斷

alita自身也在不斷改進它的轉化限制

 

六. 採用 Taro 方案的改造思路

問題列表(Problem)

Taro其實也有一個叫eslint-config-taro 的eslint插件幫助檢查各類不符合Taro要求的代碼風格，總結以下

改造難度從上往下遞減，上面難，下面簡單

• P1. Animation, 原平生臺組件和第三方組件Taro是不支持的，須要尋找方法規避轉化問題

• P2. 設計稿的單位，尺寸匹配問題等問題須要修改解決的思路

• P3. RN用的樣式編碼方式和引用方式須要修改

• P4. 路由系統要修改成Taro自帶的路由系統 和 API

• P5. 網絡請求要修改，fetch/Ajax 等原生的要改爲Taro的Taro.request這一API

• P6. 引用圖片、音頻、字體等文件的方式要改

• P7. 部分RN樣式屬性值Taro是沒有的,並且部分樣式屬性的默認值RN和Taro不一致

• P8.由於小程序的特殊需求，致使部分代碼不符合Taro的編碼規範，總結以下

• P9. aync/await的使用要經過導入taro的包來開啓

• P10.redux的使用改成 @tarojs/redux

解決思路

P1. Animation, 原平生臺組件和涉及前二者的第三方組件，這三者Taro是不支持的，須要尋找方法規避轉化問題

解決思路

• 若是是小範圍的改動，能夠經過平臺變量process.env.TARO_ENV去規避（值有 weapp/alipay/h5/rn）

• 若是是大範圍的改動，能夠經過腳本後綴名差別的方式區分小程序和RN平臺（xxx.weapp.js和xxx.js）

P2. 設計稿的單位，尺寸匹配問題等問題須要修改解決的思路

• 設計稿的單位要修改, Taro彷佛不支持純數字的長度，因此要改爲rem或者Px

• 設計稿尺寸匹配問題，Taro默認是根據750的設計稿匹配的，能夠在配置文件的designWidth屬性中進行修改

• 若是是行內長度樣式，那麼要作手動轉換：Taro.pxTransform(10)

P3. RN用的樣式編碼方式和引用方式須要修改

• RN是經過向style中導入對象的方式引入樣式，而Taro是經過className結合import樣式文件的方式引入樣式

• RN的屬性命名方法是駝峯，而Taro是短橫線

react-native的樣式編碼方式

class App extends React.Component {
  render () {
    return ()
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    opacity: 0.6
  }
})

 

Taro的樣式編碼方式(相似傳統的CSS編碼方式)

// index.js
import "index.css"
class App extends React.Component {
  render () {
    return ()
  }
}
// index.css
.bar {
  height: 10Px;
  background-color:'10px'
}

 

P4.路由系統要修改成Taro自帶的路由系統 和 API

比咱們可能會選擇react-navigation模塊做爲咱們的導航工具，而咱們須要改形成Taro自帶的

import Taro from '@tarojs/taro'
Taro.navigateTo(params).then(...)

 

P5. 網絡請求要修改，fetch/Ajax 等原生的要改爲Taro的Taro.request這一API

import Taro from '@tarojs/taro'
 
Taro.request({
 url: 'http://localhost:8080/test',
 data: {  foo: 'foo' },
 header: { 'content-type': 'application/json' }
}).then(
 res => console.log(res.data)
)

 

P6. 引用圖片、音頻、字體等文件的方式要改 

• RN用的是<Image source={...} />和<ImageBackground source />

• Taro用的是<Image src={...} />

// 引用文件
import namedPng from '../../images/path/named.png'
// 使用
<View>
 <Image src={namedPng} />
</View>

 

P7. 部分RN樣式屬性值Taro是沒有的,並且部分樣式屬性的默認值RN和Taro不一致

• 部分屬性值存在差別,例如marginVertical，paddingVertical等等，RN有，可是Taro沒有

• 部分屬性的默認值存在區別，在RN中,flexDirection默認是column,而在其餘的平臺中，flexDirection默認是row

P8.由於小程序的特殊需求，致使部分代碼不符合Taro的編碼規範，總結以下

由於這些坑不多會主動踩到，除非做死

（1）事件參數(props)都要以on開頭

// 錯誤
const element = <View bindtap={this.onTag} />
// 正確
const element = <View onClick={this.onTag} />

（2）不能對this.props.children作任何操做

// 錯誤的兩種寫法
this.props.children && this.props.children
this.props.children[0]

（3）不能使用 Array#map 以外的方法操做 JSX 數組

// 錯誤，JSX數組不能用非Map方法，普通數組才能夠
const components = [<Component />...];
components.find(component => {
  return component === <View />
})

 

P9. aync/await的使用要經過導入taro的包來開啓

很簡單，不用考慮工做量

import '@tarojs/async-await' 
// 下面就能夠正常使用async/await了

 

P10.redux的使用改成 @tarojs/redux

API彷佛沒有變？應該是無需擔憂了

參考資料

Alita官網 https://github.com/areslabs/alita 
Taro官網 https://taro.aotu.io/