react-native 踩坑記

標籤：line   dal   超出   shu   點擊   foreach   螢幕   擷取   全域   

最近在使用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    }

3.直接import你改好的檔案，fetch就可以用了四.Modal

Mode控制項在使用的時候要注意了，因為這個是rn提供的，並且也寫的很清楚是最高層級的一個彈出層，所以你想要又開啟Model又要跳轉基本是無望的了，所以建議不要使用這個，最好是使用第三方的控制項，我們用的是 react-native-modalbox + 高階控制項 實現的全遮蓋的彈出層

五.點擊螢幕其他位置關閉的菜單

這類菜單有個共同的特點就是點擊螢幕其他地方然後菜單就關閉，我們的解決辦法就是用自己寫的 react-native-modalbox + 高階控制項 也就是說放在一個彈出層裡面，當然可以試試把當前頁面套進一個大的 TouchableWithoutFeedback 裡面

暫時就想到了這些，等我好好總結下再寫添加吧

react-native 踩坑記