React-Native转小程序调研报告：Taro & Alita
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1nafm-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 18px" data-offset-key="7k57i-0-0">一. 我们的要求</span></h2><h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bgu0-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="bgu0-0-0">期望的要求</span></h3>
<ol class="public-DraftStyleDefault-ol" data-offset-key="7k6rk-0-0">
<li class="Editable-styled public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="7k6rk-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7k6rk-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="7k6rk-0-0">基于React语法，将RN项目转化为小程序项目</span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="20osg-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="20osg-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="20osg-0-0">该小程序能同时在 微信小程序 和 支付宝小程序这两个平台运行</span></p>
</li>
</ol>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ej91p-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="ej91p-0-0">底线要求</span></h3>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c4e15-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="c4e15-0-0">底线是能转成微信小程序，因为目前来说，因为微信先发制人，再加上微信本身的用户黏性，导致在小程序这一块大多数其他平台都难以迎头赶上，包括支付宝小程序，百度小程序，头条小程序等等。</span></div>
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="f08pp-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 18px" data-offset-key="f08pp-0-0">二. 目前可供选择的生态,以及各自存在的问题</span></h2>
<ol class="public-DraftStyleDefault-ol" data-offset-key="7rqm8-0-0">
<li class="Editable-styled public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="7rqm8-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7rqm8-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="7rqm8-0-0">能将已有RN项目转化为微信小程序的工具， 比如 Alita ，但它不能转成支付宝或其他小程序</span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="443tt-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="443tt-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="443tt-0-0">从零开发的多端框架，比如Taro（京东），chameleon（滴滴）, uni-app等等，问题在于：很多框架，比如uni-app，chameleon是基于Vue语法的，无法适用我们React项目的情况</span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="5m9j2-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5m9j2-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="5m9j2-0-0">专门设计的微信小程序框架（mpvue,webpy） ，问题也是和上面类似，Vue的语法，而且只是针对微信小程序的</span></p>
</li>
</ol>
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="djt8-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 18px" data-offset-key="djt8-0-0">三. 最终的工具选择:Alita && Taro</span></h2>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5trf2-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="5trf2-0-0">综合我们对React语法的要求，以及对平台转化的需求，最终觉得比较合适的有两个工具/框架，分别是Alita 和 Taro</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5trf2-0-0">
<h3><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="7i1f8-0-0">Alita介绍</span></h3>
</div>
<ul class="public-DraftStyleDefault-ul" data-offset-key="8j7i7-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="8j7i7-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8j7i7-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="8j7i7-0-0">Alita介绍：它是京东的ARES多端技术团队，开发的React Native一键转化为微信小程序的工具。不过只能转成微信小程序，不能专成支付宝小程序</span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="5vg8j-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5vg8j-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="5vg8j-0-0">Alita的特性： Alita不是新的框架，也没有提出新的语法规则，她只做一件事，就是把你的React Native代码运行在微信小程序端。所以Alita的侵入性很低，选用与否，并不会对你的原有React Native开发方式造成太大影响。</span></p>
</li>
</ul>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5dj49-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="5dj49-0-0">Taro 介绍</span></h3>
<ul class="public-DraftStyleDefault-ul" data-offset-key="6huae-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="6huae-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6huae-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="6huae-0-0">Taro介绍：它是由京东凹凸实验室开发的多端框架</span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="el4d7-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="el4d7-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="el4d7-0-0">Taro的定位：它和Alita不同，不是既有项目的转化工具，而是从零开始开发的多端框架。</span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="f5nda-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="f5nda-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="f5nda-0-0">Taro特性：使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等）运行的代码。</span></p>
</li>
</ul>
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bl04t-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 18px" data-offset-key="bl04t-0-0">四. <span data-offset-key="bl04t-0-1">Alita && Taro <span data-offset-key="bl04t-0-2">的调研总结</span></span></span></h2>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9oarn-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="9oarn-0-0">改造成本的对比</span></h3>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6s1c8-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="6s1c8-0-0">我们上面说了，Alita是将既有的React-Native项目转化为微信小程序框架的工具，那么它是不是轻轻松松就能实现一键转化呢？ 其实不是的，Alita也要求你要完全遵循它的语法规则才能转化成功，否则那个文件将不会转化，这就需要对原有项目进行改造了</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="4tf5f-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="4tf5f-0-0">Taro自然也是这样了，因为它本身就是一套多端框架，也需要修改成它的代码规范才能运行</span></div>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cog6j-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="cog6j-0-0">综合对比</span></h3>
<div>
<div class="Image-captionContainer" data-size="normal">
<div><span style="font-family: "Microsoft YaHei"; font-size: 15px"><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic4.zhimg.com/v2-7e5f2a6061f057376a194286e654c20b_b.png" alt="" data-size="normal" data-rawwidth="1416" data-rawheight="634" data-watermark="watermark" data-original-src="https://pic4.zhimg.com/v2-7e5f2a6061f057376a194286e654c20b_b.jpg" data-watermark-src="https://pic3.zhimg.com/v2-48706d0ccc9c12aea27ba33368a3679a_b.jpg"></span></div>
</div>
</div>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="50j55-0-0"> </p>
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="50j55-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="50j55-0-0"><span data-text="true"><span style="font-size: 18px">五. 采用 Alita 方案的改造思路</span> </span></span></h2>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="65nks-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="65nks-0-0"><span data-text="true">Alita可以通过运行下面命令的方式基于已有的RN项目生成一个新的小程序项目</span></span></div>
<div class="cnblogs_code">
<pre>alita -i rnProject -o wxProject</pre>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5dp0d-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="5dp0d-0-0"><span data-text="true">不过问题在于，必须要修改代码以符合Alita的转化条件（一开始想着能一键转化，空手套小程序的我还是太单纯了。。）</span></span></div>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fu1t4-0-0"> </p>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fu1t4-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="fu1t4-0-0"><span data-text="true">问题复现： 如果不对原有代码改造就转化会怎样？</span></span></h3>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9saem-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="9saem-0-0"><span data-text="true">1.根据官方案例提供的example，原本目录c下有一个文件：index.js，正确打包后如下图所示</span></span></div>
<div>
<div class="Image-captionContainer" data-size="normal">
<div><span style="font-family: "Microsoft YaHei"; font-size: 15px"><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-fa245c0eb438191f1bbab97d5e6b08fa_b.png" alt="" width="179" height="216" data-size="normal" data-rawwidth="438" data-rawheight="528" data-watermark="watermark" data-original-src="https://pic3.zhimg.com/v2-fa245c0eb438191f1bbab97d5e6b08fa_b.jpg" data-watermark-src="https://pic3.zhimg.com/v2-17628976cf1a79e3b0fa32ccb3bfee26_b.jpg"></span></div>
</div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ev0pp-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="ev0pp-0-0"> </span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d5emp-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="d5emp-0-0"><span data-text="true">2.我这里写入一个Alita禁止的写法：<span data-offset-key="d5emp-0-1"><span data-text="true"> 使用as关键字</span></span></span></span></div>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7sl8u-0-0"> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 修改前的 good style </span>
import React, {Component } from 'react'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 修改后的 bad style</span>
import React, {Component as BadComponent} from 'react'<span style="color: rgba(0, 0, 0, 1)">;
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> class C extends BadComponent {
}</span></pre>
</div>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7sl8u-0-0"> </p>
<p> </p>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1mnf3-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="1mnf3-0-0"><span data-text="true">原本打包后c目录下原本有文件的，现在啥都没有了</span></span></div>
<div>
<div class="Image-captionContainer" data-size="normal">
<div><span style="font-family: "Microsoft YaHei"; font-size: 15px"><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-018eeb8ad623f9d6c7016e6ca6519b02_b.png" alt="" width="253" height="98" data-size="normal" data-rawwidth="300" data-rawheight="116" data-watermark="watermark" data-original-src="https://pic3.zhimg.com/v2-018eeb8ad623f9d6c7016e6ca6519b02_b.jpg" data-watermark-src="https://pic4.zhimg.com/v2-a342bab464bb4b86e4514403ca6638b3_b.jpg"></span></div>
<div> </div>
<div> </div>
</div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ee5jg-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="ee5jg-0-0"><span data-text="true">3.也就是说项目中一定不能有上面所讲的Alita禁止的写法，必须要进行转化</span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cedur-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="cedur-0-0"> </span></div>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="4efn0-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="4efn0-0-0"><span data-text="true">借助eslint排查和修改不符合alita风格的代码</span></span></h3>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6murp-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="6murp-0-0"><span data-text="true">首先我们要把Alita提供的eslint插件导入项目，把不符合Alita要求的代码风格改掉，我们来看下eslint有哪些规则</span></span></div>
<div>
<div class="Image-captionContainer" data-size="normal">
<div><span style="font-family: "Microsoft YaHei"; font-size: 15px"><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-abfdcc9521232020d59346335170266e_b.png" alt="" width="585" height="394" data-size="normal" data-rawwidth="1626" data-rawheight="1096" data-watermark="watermark" data-original-src="https://pic3.zhimg.com/v2-abfdcc9521232020d59346335170266e_b.jpg" data-watermark-src="https://pic4.zhimg.com/v2-2bedc97592ba1eaa517c60099f3a831f_b.jpg"></span></div>
</div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7ri41-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="7ri41-0-0"> </span></div>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="dht74-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 18px" data-offset-key="dht74-0-0"><span data-text="true">Alita转化前代码风格修改流程</span></span></h3>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8dqge-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="8dqge-0-0"><span data-text="true">注意一个问题：并不是所有有问题的代码风格alita的eslint插件都会做提示，实际上，它只会对80%的有问题的代码报出警告，所以有部分代码风格我们是要手动发现和修改的。所以我把问题分成了三类，分别按三种方式处理</span></span></div>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eorcv-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="eorcv-0-0"><span data-text="true">A类问题</span></span></strong></p>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3o7n2-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="3o7n2-0-0"><span data-text="true">这些不符合eslint的代码是会有警告的</span></span></p>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="aolja-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="aolja-0-0"><span data-text="true">解决办法<span data-offset-key="aolja-0-1"><span data-text="true">：逐个文件过一遍，把警告消除就好</span></span></span></span></div>
<ul class="public-DraftStyleDefault-ul" data-offset-key="an8r2-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="an8r2-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="an8r2-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="an8r2-0-0"><span data-text="true">高阶组件限制，也就是路由深度不大于5层 </span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="e839d-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="e839d-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="e839d-0-0"><span data-text="true">动画组件要使用alita的 </span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="28eeu-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="28eeu-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="28eeu-0-0"><span data-text="true">静态限制 </span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="de3po-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="de3po-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="de3po-0-0"><span data-text="true">global变量不允许使用 </span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="f5m3g-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="f5m3g-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="f5m3g-0-0"><span data-text="true">一个文件最多只能定义一个组件 </span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="34v3e-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="34v3e-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="34v3e-0-0"><span data-text="true">React Native基本组件不支持属性展开 </span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="9tgbk-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9tgbk-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="9tgbk-0-0"><span data-text="true">this.props.xxComponent 要写完全</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="ctvb6-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ctvb6-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="ctvb6-0-0"><span data-text="true">使用高阶组件</span></span></p>
</li>
</ul>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="dnst3-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="dnst3-0-0"><span data-text="true">B类问题</span></span></strong></p>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7732g-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="7732g-0-0"><span data-text="true">这些问题，eslint插件没有提示,同时根据我们的使用习惯，有可能会这样用的代码风格</span></span></p>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1nn8l-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="1nn8l-0-0"><span data-text="true">解决办法：<span data-offset-key="1nn8l-0-1"><span data-text="true">下面的大多数问题，都可以通过搜索的方式，找出问题并解决</span></span></span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eargv-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="eargv-0-0"><span data-text="true">备注<span data-offset-key="eargv-0-1"><span data-text="true">：下面的“（数字）”在 <span data-offset-key="eargv-1-0"><span data-text="true">参考资料</span></span><span data-offset-key="eargv-2-0"><span data-text="true">中找到对应的条目，查看细节解释</span></span></span></span></span></span></div>
<ul class="public-DraftStyleDefault-ul" data-offset-key="3lo5d-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="3lo5d-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3lo5d-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="3lo5d-0-0"><span data-text="true">路由组件需要用@areslabs/router </span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="ctu18-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ctu18-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="ctu18-0-0"><span data-text="true">ref 必须是方法，不支持字符串</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="fnjpi-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fnjpi-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="fnjpi-0-0"><span data-text="true">不支持 onLayout 方法</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="2e21o-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2e21o-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="2e21o-0-0"><span data-text="true">代码体积限制：压缩的代码小于 4M，分包 8M，大于的话就不行 </span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="din02-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="din02-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="din02-0-0"><span data-text="true">函数组件在定义时候没有同时导出</span></span></p>
</li>
</ul>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="57can-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="57can-0-0"><span data-text="true">C类问题</span></span></strong></p>
<p><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="aoea2-0-0"><span data-text="true">这些约束，eslint插件没有提示,但是我们一般都不会这么写，除非作死</span></span></p>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8ea1s-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="8ea1s-0-0"><span data-text="true">解决办法<span data-offset-key="8ea1s-0-1"><span data-text="true">： 发现有问题再来排查</span></span></span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="efatd-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="efatd-0-0"><span data-text="true">备注<span data-offset-key="efatd-0-1"><span data-text="true">：下面的“（数字）”在 <span data-offset-key="efatd-1-0"><span data-text="true">参考资料</span></span><span data-offset-key="efatd-2-0"><span data-text="true">中找到对应的条目，查看细节解释</span></span></span></span></span></span></div>
<ul class="public-DraftStyleDefault-ul" data-offset-key="7bf8q-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="7bf8q-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7bf8q-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="7bf8q-0-0"><span data-text="true">for循环中返回组件，key不指定</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="d0ace-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d0ace-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="d0ace-0-0"><span data-text="true">作为props的组件进行多层级传递 </span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="9sclg-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9sclg-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="9sclg-0-0"><span data-text="true">从外部引用JSX片段</span></span></p>
</li>
</ul>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="61ldq-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="61ldq-0-0"><span data-text="true">alita自身也在不断改进它的转化限制</span></span></h3>
<div>
<div class="Image-captionContainer" data-size="normal">
<div><span style="font-family: "Microsoft YaHei"; font-size: 15px"><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-ce62742f13fda381cbf848eed5a3af8c_b.png" alt="" data-size="normal" data-rawwidth="1536" data-rawheight="1298" data-watermark="watermark" data-original-src="https://pic1.zhimg.com/v2-ce62742f13fda381cbf848eed5a3af8c_b.jpg" data-watermark-src="https://pic2.zhimg.com/v2-917875902cb4a8af23c0859621545b6d_b.jpg"></span></div>
</div>
</div>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6scvj-0-0"> </p>
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6scvj-0-0"><span style="font-size: 18px"><strong><span style="font-family: "Microsoft YaHei"" data-offset-key="6scvj-0-0"><span data-text="true">六. 采用 Taro 方案的改造思路 </span></span></strong></span></h2>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7qkbt-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="7qkbt-0-0"><span data-text="true">问题列表(Problem)</span></span></h3>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3tqng-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="3tqng-0-0"><span data-text="true">Taro<span data-offset-key="3tqng-0-1"><span data-text="true">其实也有一个叫<span data-offset-key="3tqng-0-2"><span data-text="true">eslint-config-taro <span data-offset-key="3tqng-0-3"><span data-text="true">的eslint插件帮助检查各种不符合Taro要求的代码风格，总结如下</span></span></span></span></span></span></span></span></p>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6o3kq-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="6o3kq-0-0"><span data-text="true">改造难度从上往下递减，上面难，下面简单</span></span></p>
<ul class="public-DraftStyleDefault-ul" data-offset-key="3m98a-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="3m98a-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3m98a-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="3m98a-0-0"><span data-text="true">P1. Animation, 原生平台组件和第三方组件Taro是不支持的，需要寻找方法规避转化问题</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="1djf0-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1djf0-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="1djf0-0-0"><span data-text="true">P2. 设计稿的单位，尺寸匹配问题等问题需要修改解决的思路</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="500bq-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="500bq-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="500bq-0-0"><span data-text="true">P3. RN用的样式编码方式和引用方式需要修改</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="c6329-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c6329-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="c6329-0-0"><span data-text="true">P4. 路由系统要修改为Taro自带的路由系统 和 API</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="chsek-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="chsek-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="chsek-0-0"><span data-text="true">P5. 网络请求要修改，fetch/Ajax 等原生的要改成Taro的Taro.request这一API</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="13kv0-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="13kv0-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="13kv0-0-0"><span data-text="true">P6. 引用图片、音频、字体等文件的方式要改</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="58chn-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="58chn-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="58chn-0-0"><span data-text="true">P7. 部分RN样式属性值Taro是没有的,而且部分样式属性的默认值RN和Taro不一致</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="9imm-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9imm-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="9imm-0-0"><span data-text="true">P8.因为小程序的特殊需求，导致部分代码不符合Taro的编码规范，总结如下</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="4pln6-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="4pln6-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="4pln6-0-0"><span data-text="true">P9. aync/await的使用要通过导入taro的包来开启</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="d9r9d-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d9r9d-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="d9r9d-0-0"><span data-text="true">P10.redux的使用改为 @tarojs/redux</span></span></p>
</li>
</ul>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="dc39u-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="dc39u-0-0"><span data-text="true">解决思路</span></span></h3>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8svcd-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="8svcd-0-0"><span data-text="true">P1. Animation, 原生平台组件和涉及前两者的第三方组件，这三者Taro是不支持的，需要寻找方法规避转化问题</span></span></strong></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="b0tlf-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="b0tlf-0-0"><span data-text="true">解决思路</span></span></div>
<ul class="public-DraftStyleDefault-ul" data-offset-key="fs2pv-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="fs2pv-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fs2pv-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="fs2pv-0-0"><span data-text="true">如果是小范围的改动，可以通过平台变量process.env.TARO_ENV去规避（值有 weapp/alipay/h5/rn） </span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="26q1m-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="26q1m-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="26q1m-0-0"><span data-text="true">如果是大范围的改动，可以通过脚本后缀名差异的方式区分小程序和RN平台（xxx.weapp.js和xxx.js）</span></span></p>
</li>
</ul>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="dpmmq-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="dpmmq-0-0"><span data-text="true"><strong>P2. 设计稿的单位，尺寸匹配问题等问题需要修改解决的思路</strong> </span></span></div>
<ul class="public-DraftStyleDefault-ul" data-offset-key="1amrp-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="1amrp-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1amrp-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="1amrp-0-0"><span data-text="true">设计稿的单位要修改, Taro似乎不支持纯数字的长度，所以要改成rem或者Px</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="3t2tr-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3t2tr-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="3t2tr-0-0"><span data-text="true">设计稿尺寸匹配问题，Taro默认是根据750的设计稿匹配的，可以在配置文件的designWidth属性中进行修改</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="fa2e1-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fa2e1-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="fa2e1-0-0"><span data-text="true">如果是行内长度样式，那么要做手动转换：Taro.pxTransform(10)</span></span></p>
</li>
</ul>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="b9736-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="b9736-0-0"><span data-text="true"><strong>P3. RN用的样式编码方式和引用方式需要修改</strong> </span></span></div>
<ul class="public-DraftStyleDefault-ul" data-offset-key="eid0d-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="eid0d-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eid0d-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="eid0d-0-0"><span data-text="true">RN是通过向style中导入对象的方式引入样式，而Taro是通过className结合import样式文件的方式引入样式</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="dggt7-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="dggt7-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="dggt7-0-0"><span data-text="true">RN的属性命名方法是驼峰，而Taro是短横线</span></span></p>
</li>
</ul>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9sear-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="9sear-0-0"><span data-text="true">react-native的样式编码方式</span></span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">class App extends React.Component {
render () {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> ()
}
}
const styles </span>=<span style="color: rgba(0, 0, 0, 1)"> StyleSheet.create({
container: {
flex: </span>1<span style="color: rgba(0, 0, 0, 1)">,
backgroundColor: </span>'#000'<span style="color: rgba(0, 0, 0, 1)">,
opacity: </span>0.6<span style="color: rgba(0, 0, 0, 1)">
}
})</span></pre>
</div>
<p> </p>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="41edc-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="41edc-0-0"><span data-text="true">Taro的样式编码方式(类似传统的CSS编码方式)</span></span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> index.js</span>
import "index.css"<span style="color: rgba(0, 0, 0, 1)">
class App extends React.Component {
render () {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> ()
}
}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> index.css</span>
<span style="color: rgba(0, 0, 0, 1)">.bar {
height: 10Px;
background</span>-color:'10px'<span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<p> </p>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="10v4k-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="10v4k-0-0"><span data-text="true">P4.路由系统要修改为Taro自带的路由系统 和 API</span></span></strong></p>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3cb2r-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="3cb2r-0-0"><span data-text="true">比我们可能会选择react-navigation模块作为我们的导航工具，而我们需要改造成Taro自带的</span></span></div>
<div class="cnblogs_code">
<pre>import Taro from '@tarojs/taro'<span style="color: rgba(0, 0, 0, 1)">
Taro.navigateTo(params).then(...)</span></pre>
</div>
<p> </p>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fuf14-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="fuf14-0-0"><span data-text="true">P5. 网络请求要修改，fetch/Ajax 等原生的要改成Taro的Taro.request这一API</span></span></strong></p>
<div class="cnblogs_code">
<pre>import Taro from '@tarojs/taro'<span style="color: rgba(0, 0, 0, 1)">
Taro.request({
url: </span>'http://localhost:8080/test'<span style="color: rgba(0, 0, 0, 1)">,
data: {foo: </span>'foo'<span style="color: rgba(0, 0, 0, 1)"> },
header: { </span>'content-type': 'application/json'<span style="color: rgba(0, 0, 0, 1)"> }
}).then(
res </span>=><span style="color: rgba(0, 0, 0, 1)"> console.log(res.data)
)</span></pre>
</div>
<p> </p>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5vhdg-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="5vhdg-0-0"><span data-text="true"> <span data-offset-key="5vhdg-0-1"><span data-text="true">P6. 引用图片、音频、字体等文件的方式要改 </span></span></span></span></strong></div>
<ul class="public-DraftStyleDefault-ul" data-offset-key="dj3cm-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="dj3cm-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="dj3cm-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="dj3cm-0-0"><span data-text="true">RN用的是<Image source={...} />和<ImageBackground source /></span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="c4dj0-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c4dj0-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="c4dj0-0-0"><span data-text="true">Taro用的是<Image src={...} /></span></span></p>
</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 引用文件</span>
import namedPng from '../../images/path/named.png'
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 使用</span>
<View>
<Image src={namedPng} />
</View></pre>
</div>
<p> </p>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="24ua8-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="24ua8-0-0"><span data-text="true">P7. 部分RN样式属性值Taro是没有的,而且部分样式属性的默认值RN和Taro不一致</span></span></strong></p>
<ul class="public-DraftStyleDefault-ul" data-offset-key="p5ll-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="p5ll-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="p5ll-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="p5ll-0-0"><span data-text="true">部分属性值存在差异,例如marginVertical，paddingVertical等等，RN有，但是Taro没有</span></span></p>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="b49ef" data-offset-key="eogp4-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eogp4-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="eogp4-0-0"><span data-text="true">部分属性的默认值存在区别，在RN中,flexDirection默认是column,而在其他的平台中，flexDirection默认是row</span></span></p>
</li>
</ul>
<div data-offset-key="sed-0-0"><strong><span data-offset-key="sed-0-0"><span data-text="true"> <span data-offset-key="sed-0-1"><span data-text="true">P8.因为小程序的特殊需求，导致部分代码不符合Taro的编码规范，总结如下</span></span></span></span></strong></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="dip9-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="dip9-0-0"><span data-text="true">因为这些坑很少会主动踩到，除非作死 </span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="dip9-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="dip9-0-0"><span data-text="true">（1）事件参数(props)都要以on开头</span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="dip9-0-0">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 错误</span>
const element = <View bindtap={<span style="color: rgba(0, 0, 255, 1)">this</span>.onTag} />
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 正确</span>
const element = <View onClick={<span style="color: rgba(0, 0, 255, 1)">this</span>.onTag} /></pre>
</div>
</div>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5mj4a-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="5mj4a-0-0"><span data-text="true">（2）不能对this.props.children做任何操作</span></span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 错误的两种写法</span>
<span style="color: rgba(0, 0, 255, 1)">this</span>.props.children && <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.props.children
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.props.children</pre>
</div>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7dr4v-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="7dr4v-0-0"><span data-text="true">（3）不能使用 Array#map 之外的方法操作 JSX 数组</span></span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 错误，JSX数组不能用非Map方法，普通数组才可以</span>
const components = [<Component />...];
components.find(component =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> component === <View />
})</pre>
</div>
<p> </p>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="a0cl0-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="a0cl0-0-0"><span data-text="true">P9. aync/await的使用要通过导入taro的包来开启</span></span></strong></p>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cvpp6-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="cvpp6-0-0"><span data-text="true">很简单，不用考虑工作量</span></span></div>
<div class="cnblogs_code">
<pre>import '@tarojs/async-await'
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 下面就可以正常使用async/await了</span></pre>
</div>
<p> </p>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6km4g-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="6km4g-0-0"><span data-text="true">P10.redux的使用改为 @tarojs/redux</span></span></strong></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="35jsr-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="35jsr-0-0"><span data-text="true">API似乎没有变？应该是无需担心了</span></span></div>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5lcmk-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="5lcmk-0-0"><span data-text="true">参考资料</span></span></p>
<div class="cnblogs_code">
<pre>Alita官网 https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">github.com/areslabs/alita </span>
Taro官网 https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">taro.aotu.io/ </span></pre>
</div>
<p> </p>
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="e00mj-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px" data-offset-key="e00mj-0-0"><span data-text="true"> </span></span></p>
<p class="Editable-unstyled" data-block="true" data-editor="b49ef" data-offset-key="ejq66-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 15px"> </span></p>
</div>
<div id="MySignature" role="contentinfo">
我叫彭湖湾，请叫我胖湾<br><br>
来源：https://www.cnblogs.com/penghuwan/p/11775900.html
頁:
[1]