react-native 踩坑记

SIGSEGV 5年前
   <p>最近在使用react-native的时候遇到了很多坑,这里给大家分享下</p>    <h2>一.样式</h2>    <p>react-native 虽然支持flex布局,但是所有的样式均是css样式的一个很小的集合,尤其是在安卓机下问题尤为凸显:</p>    <p>1.View内部的元素千万不要超出父级的范围,iso上问题倒是不大,安卓上就什么超出的都看不到了</p>    <p>2.lineHeight 可以用,不过千万不要写成小数,否则安卓上会直接崩溃</p>    <p>3.rn的样式不存在继承的情况,所以基本上每个节点都要写style,真的是体力活</p>    <p>4.如果Text的父级元素设置了背景颜色,那么ios下Text的背景颜色也是父级的背景颜色,要么自己写个Text重置下样式,要么就遇到了再改</p>    <p>5.react-native的字号是没有设置单位的,所以会随着系统设置的字体大小而变化,我也不知道这是不是坑,不过貌似有的app也没有管这个</p>    <h2>二.异常</h2>    <p>react-native 在发生js异常的时候,debug的时候会直接红屏幕,但是再release的时候直接会崩溃退出,解决办法</p>    <pre>  <code class="language-javascript">import ErrorUtils from "ErrorUtils"   //这里应该做个判断,如果不是debug的才做这样的异常全局处理  ErrorUtils.setGlobalHandler((e)=>{          //发生异常的处理方法,当然如果是打包好的话可能你找都找不到是哪段代码出问题了          Alert.alert("异常",JSON.stringify(e))  });</code></pre>    <h2>三.fetch</h2>    <p>react-native虽然自带有fetch,不过在使用的时候发现了一个问题,如果需要获取http的header头的时候问题就来了,可能得到的是一些千奇百怪的样式,这并不是react-native的错,而是第三方的 whatwg-fetch 留下的坑,当然也有人再github上跟react-native反映过这个问题,不过得到的解决方案都很坑,唯有一个办法,就是拷贝自己修改,修改如下:</p>    <p>1.注释该注释的</p>    <pre>  <code class="language-javascript">(function(self) {      'use strict';           //注释这里,不然总是用的是全局的fetch      // if (self.fetch) {      //     return      // }</code></pre>    <p>2.修改该修改的</p>    <pre>  <code class="language-javascript">function parseHeaders(rawHeaders) {          var headers = new Headers()                      //把\t\n改成\t,因为一般header都是用\n来分割的          rawHeaders.split('\n').forEach(function(line) {          //rawHeaders.split('\t\n').forEach(function(line) {                  var parts = line.split(':')                  var key = parts.shift().trim()                  if (key) {                      var value = parts.join(':').trim()                      headers.append(key, value)                  }              })          }          return headers      }</code></pre>    <p>3.直接import你改好的文件,fetch就可以用了</p>    <h2>四.Modal</h2>    <p>Mode控件在使用的时候要注意了,因为这个是rn提供的,并且也写的很清楚是最高层级的一个弹出层,所以你想要又打开Model又要跳转基本是无望的了,所以建议不要使用这个,最好是使用第三方的控件,我们用的是 react-native-modalbox + 高阶控件 实现的全遮盖的弹出层</p>    <h2>五.点击屏幕其他位置关闭的菜单</h2>    <p>这类菜单有个共同的特点就是点击屏幕其他地方然后菜单就关闭,我们的解决办法就是用自己写的 react-native-modalbox + 高阶控件 也就是说放在一个弹出层里面,当然可以试试把当前页面套进一个大的 TouchableWithoutFeedback 里面</p>    <p>暂时就想到了这些,等我好好总结下再写添加吧</p>    <p> </p>    <p>来自:http://www.cnblogs.com/wang4517/p/6178859.html</p>    <p> </p>