react-native 踩坑记

Posted 2020-08-23 你猜不猜

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react-native 踩坑记相关的知识，希望对你有一定的参考价值。

最近在使用react-native的时候遇到了很多坑，这里给大家分享下

一.样式

react-native 虽然支持flex布局，但是所有的样式均是css样式的一个很小的集合，尤其是在安卓机下问题尤为凸显：

1.View内部的元素千万不要超出父级的范围，iso上问题倒是不大，安卓上就什么超出的都看不到了

2.lineHeight 可以用，不过千万不要写成小数，否则安卓上会直接崩溃

3.rn的样式不存在继承的情况，所以基本上每个节点都要写style，真的是体力活

4.如果Text的父级元素设置了背景颜色，那么ios下Text的背景颜色也是父级的背景颜色，要么自己写个Text重置下样式，要么就遇到了再改

5.react-native的字号是没有设置单位的，所以会随着系统设置的字体大小而变化，我也不知道这是不是坑，不过貌似有的app也没有管这个

二.异常

react-native 在发生js异常的时候，debug的时候会直接红屏幕，但是再release的时候直接会崩溃退出，解决办法

import ErrorUtils from "ErrorUtils" 
//这里应该做个判断，如果不是debug的才做这样的异常全局处理
ErrorUtils.setGlobalHandler((e)=>{
　　//发生异常的处理方法,当然如果是打包好的话可能你找都找不到是哪段代码出问题了
　　Alert.alert("异常",JSON.stringify(e))
});

三.fetch

react-native虽然自带有fetch，不过在使用的时候发现了一个问题，如果需要获取http的header头的时候问题就来了，可能得到的是一些千奇百怪的样式，这并不是react-native的错，而是第三方的 whatwg-fetch 留下的坑，当然也有人再github上跟react-native反映过这个问题，不过得到的解决方案都很坑，唯有一个办法，就是拷贝自己修改，修改如下:

1.注释该注释的

(function(self) {
    ‘use strict‘;
　　 //注释这里，不然总是用的是全局的fetch
    // if (self.fetch) {
    //     return
    // }

2.修改该修改的

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
    }