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
    }

3.直接import你改好的文件，fetch就可以用了

四.Modal

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

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

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

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

來自：http://www.cnblogs.com/wang4517/p/6178859.html