hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

React-Native转小顺序调研报告:Taro & Alita

2019-11-18杂谈搜奇网66°c
A+ A-

一. 我们的要求

希冀的要求

  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/ 

 

 

 

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
React-Native转小顺序调研报告:Taro & Alita

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
未定义标签

本文来源:搜奇网

本文地址:https://www.sou7.cn/281943.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>