react-native注意事项，开发前必读文档

傷城~ 2022-10-11 15:59 29阅读 0赞

### react-native各种不同点总结 ###

*   *  1. 平台区别
     *  2. 样式处理及不同点
     *  3. 特殊注意点

![在这里插入图片描述][20210719120505563.png]

## 1. 平台区别 ##

组件文件区别
    index.js        -> index.rn.js
    index.scss  -> index.rn.scss
    
    路由页面区别 <请避免使用>
    index.js    -> index.android.js   index.ios.js
    index.scss  -> index.android.scss   index.ios.scss
    
    scss 行rn忽略
    /*postcss-pxtransform rn eject enable*/   
    white-space: nowrap;
    /*postcss-pxtransform rn eject disable*/
    
    js 里特殊判断
    process.env.TARO_ENV === "rn"

## 2. 样式处理及不同点 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">类型</th> 
   <th>例</th> 
   <th>修改</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">transform</td> 
   <td>translate(-50%, 0)</td> 
   <td>@include eject()</td> 
   <td>RN不支持百分比</td> 
  </tr> 
  <tr> 
   <td align="left">Tarnsition</td> 
   <td>Any</td> 
   <td>@include eject()</td> 
   <td>RN不支持</td> 
  </tr> 
  <tr> 
   <td align="left">background</td> 
   <td>line-gradient</td> 
   <td>@include eject()</td> 
   <td>RN不支持渐变色背景</td> 
  </tr> 
  <tr> 
   <td align="left">position</td> 
   <td>fixed</td> 
   <td>position:abslute;@include eject(position: fixed)</td> 
   <td>RN只有relative和absolute</td> 
  </tr> 
  <tr> 
   <td align="left">-webkit-overflow-Scroll</td> 
   <td>any</td> 
   <td>@include eject()</td> 
   <td>RN不支持该属性</td> 
  </tr> 
  <tr> 
   <td align="left">line-height</td> 
   <td>50%</td> 
   <td>改写成像素表示</td> 
   <td>CSS中数字类型表示行距倍数，RN中表示行距像素</td> 
  </tr> 
  <tr> 
   <td align="left">box-shadow</td> 
   <td>spread</td> 
   <td>Box-shadow:1px 1px 24px #eee;@include eject(1px 1px 24px 0px #eee);</td> 
   <td>RN仅支持width height blur 不支持spread</td> 
  </tr> 
  <tr> 
   <td align="left">font-family</td> 
   <td>multiple</td> 
   <td>避免使用</td> 
   <td>RN不支持多个字体类型设置</td> 
  </tr> 
  <tr> 
   <td align="left">!important</td> 
   <td></td> 
   <td>如需使用，请使用@include eject($property, $value). 通过合理的类名，和sass预设，可以规避</td> 
   <td>RN不支持!Important 的写法</td> 
  </tr> 
  <tr> 
   <td align="left">font-size</td> 
   <td>Inherit</td> 
   <td>改写成像素表示</td> 
   <td>RN的fontSize只支持数字，即逻辑像素</td> 
  </tr> 
  <tr> 
   <td align="left">outline</td> 
   <td>any</td> 
   <td>@include eject()</td> 
   <td>RN不支持该属性</td> 
  </tr> 
  <tr> 
   <td align="left">resize</td> 
   <td>any</td> 
   <td>@include eject()</td> 
   <td>RN不支持该属性</td> 
  </tr> 
  <tr> 
   <td align="left">align-items</td> 
   <td>top</td> 
   <td>使用规范值</td> 
   <td>RN只支持flex-start flex-end center stretch baseline</td> 
  </tr> 
  <tr> 
   <td align="left">box-sizing</td> 
   <td></td> 
   <td>使用padding时注意即可</td> 
   <td>RN是border-box，需要其他端兼容</td> 
  </tr> 
  <tr> 
   <td align="left">flex-direction</td> 
   <td>默认值不同</td> 
   <td>使用同行多个元素时注意即可</td> 
   <td>RN默认方向为column，而web默认是row</td> 
  </tr> 
  <tr> 
   <td align="left">color</td> 
   <td>rgb</td> 
   <td>非透明色尽量使用HTML形式，透明色使用rgba形式</td> 
   <td>rgb支持3个属性，如果传了第四个属性（即透明度），web自动忽略，RN中无法解析</td> 
  </tr> 
  <tr> 
   <td align="left">组合选择器</td> 
   <td>any</td> 
   <td>避免使用</td> 
   <td>组合选择器不支持 sass中的组合选择器在转换成RN的时候会被忽略</td> 
  </tr> 
  <tr> 
   <td align="left">margin重叠</td> 
   <td>any</td> 
   <td>@include eject()</td> 
   <td>纵向margin重叠，RN端不存在，不论是同级元素之间还是父子元素之间</td> 
  </tr> 
  <tr> 
   <td align="left">display</td> 
   <td></td> 
   <td>None , flex</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left">overflow</td> 
   <td></td> 
   <td>visible , hidden , scroll</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

## 3. 特殊注意点 ##

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>注意点</th> 
   <th>解决方案</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>View</td> 
   <td>不渲染的话，return null或者undefined不要return 空</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>View</td> 
   <td>字符串style backgroundImage不支持，需要差异化代码</td> 
   <td>RN中可以使用ImageBackground组件设置背景</td> 
  </tr> 
  <tr> 
   <td>View</td> 
   <td>内部不能直接使用字符串</td> 
   <td>字符串外部使用Text</td> 
  </tr> 
  <tr> 
   <td>storage</td> 
   <td>RN不支持同步的storage</td> 
   <td>不论是get还是set都是异步方法，推荐promise化使用</td> 
  </tr> 
  <tr> 
   <td>后代选择器</td> 
   <td>sass或者纯css中避免后代选择器，RN会直接忽略</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>Image</td> 
   <td>RN中Image需要显性指定宽高，无法自动获取</td> 
   <td>避免使用height: auto等方式设置</td> 
  </tr> 
  <tr> 
   <td>Image</td> 
   <td>设置mode</td> 
   <td>不设置可能导致图片变形或不如预期</td> 
  </tr> 
  <tr> 
   <td>组件参数</td> 
   <td>组件参数类型必须正确，number类型传字符串会报错</td> 
   <td>避免maxLength=“6”这样的写法，改成maxLength={6}</td> 
  </tr> 
  <tr> 
   <td>Taro.showLoadihng</td> 
   <td>需要手动调用Taro.hideLoading()隐藏</td> 
   <td>注意即可</td> 
  </tr> 
  <tr> 
   <td>Input</td> 
   <td>iOS无法输入中文</td> 
   <td>需要特殊封装，shouldComponentUpdate。【dq-Input已封装】</td> 
  </tr> 
  <tr> 
   <td>Picker</td> 
   <td>RN下直接使用可能会无法触发</td> 
   <td>需要在Picker子组件外部包裹一层DqTouchable组件</td> 
  </tr> 
  <tr> 
   <td>style属性</td> 
   <td>接受一个对象，不可以是字符串，flex的值应该是number</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>style属性</td> 
   <td>style内联样式Taro不会自动转换格式</td> 
   <td>使用utils/style.js -&gt; formatStyle方法进行转换</td> 
  </tr> 
  <tr> 
   <td>Text内部</td> 
   <td>只能包裹Text或者Image组件，不能包含其他子组件，包括IconFont</td> 
   <td>IconFont本质上是SVG</td> 
  </tr> 
  <tr> 
   <td>独有样式分离</td> 
   <td>比如color，fontSize等Text独有样式，不写到View组件上</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>阻止触摸</td> 
   <td>e &amp;&amp; e.stopPropagation &amp;&amp; e.stopPropagation()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>hooks</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>路由参数</td> 
   <td>组件里使用全局变量获取，例：global.routerParams</td> 
   <td>组件里获取不到this.$router.params</td> 
  </tr> 
 </tbody> 
</table>

> **1. 如有错误，敬请指出**
> 
> **2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）**  
> **3. 拜谢各位！后续将继续奉献优质好文**  
> **4. 如果存在疑问，可以私信我**

![在这里插入图片描述][20210602004040139.png]

[20210719120505563.png]: /images/20221005/24837bc7418c4f5baf235fb5f85073fd.png
[20210602004040139.png]: /images/20221005/84b2ad60b59b41b0b7e93544bc58e567.png