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小顺序、快运用、H5、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/