React-native trample the Pit to remember

Recently in the use of react-native encountered a lot of pits, here to share the next

A. Style

React-native supports flex layouts, but all styles are a small collection of CSS styles, especially when it comes to Android:

1.View internal elements must not exceed the scope of the parent, the problem on the ISO is not very small, Android on what beyond the can not see the 2.lineHeight may be used, but do not write a decimal, Otherwise Android will directly crash 3.rn style does not exist, so basically every node to write style, really is the physical life 4. If the parent element of text is set to a background color, then the background color of text in iOS is also the background color of the parent, either write a text reset under the style, or you will encounter a change of 5 The font size of the. React-native is not set, so it will change with the font sizes of the system settings, I do not know if this is a pit, but it seems that the app has no control over this two. exception

React-native in the event of JS Anomaly, when the debug will be directly red screen, but then release the time will collapse directly exit, the solution

You should make a judgment here, if it's not debug, do such an exception global processing Errorutils.setglobalhandler ((e) =>{
The handling of the exception occurred, of course, if it is packaged well, you may not find what code is wrong Alert.alert ("exception", Json.stringify (e))});

Three. Fetch

React-native Although with the fetch, but in the use of the time to find a problem, if you need to get the header of HTTP when the problem comes, may get some strange style, this is not React-native's fault, but the third party's Whatwg-fetch left the pit, of course, some people on GitHub and react-native reflect this problem, but the solution is very pit, only one way, is to copy their own changes, modified as follows:

1. Note that the comment

(function (self) {    ' use strict '; Note here, otherwise it is always the global fetch    //if (Self.fetch) {    //     return    //}

2. Modify the Modified

function Parseheaders (rawheaders) {        var headers = new Headers ()
Change the \t\n to \ t because the general header is the        rawheaders.split (' \ n ') that is split with \ n. ForEach (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. Direct import of your modified files, fetch can be used for four. Modal

The mode control in use should pay attention to, because this is the RN provided, and also write very clearly is the highest level of a pop-up layer, so you want to open model and jump basically is hopeless, so it is recommended not to use this, preferably using a third-party control, we use the React-native-modalbox + high-level control implementation of a fully covered pop-up layer

Five. Click the menu that is closed from another location on the screen

This kind of menu has a common feature is to click on the screen other places and then the menu closed, our solution is to use their own React-native-modalbox + high-level control that is placed in a pop-up layer, of course, you can try to put the current page into a large Touchablewithoutfeedback inside

Think of this for the time being, and then I'll write it down and add it.

React-native trample the Pit to remember