The scheme of react native suitable for Iphonex

With the advent of Iphonex, a number of changes have taken place on the UI.

1. The height of the navigation bar before the IOS11 is 64, where the height of the status bar (StatusBar) is 20. The Iphonex status bar (StatusBar) Height changes to 44 (sensor area height).

2, the bottom of the Iphonex increased the virtual home area, because the security zone causes the default Tabbar height from 49 to 83, increased (home area height), so the custom base Tabbar also need to change its adaptation scheme.

To fit the iphone X, seniors offered some solutions:

1, Iphone-x-helper
Project Address: Https://github.com/ptelad/react-native-iphone-x-helper
The main code is as follows:

Import {Dimensions, Platform} from ' react-native ';


Export function Isiphonex () {let
    dimen = dimensions.get (' window ');
    return (
        Platform.os = = ' iOS ' &&
        ! Platform.ispad &&
        ! Platform.istvos &&
        (dimen.height = = 812 | | dimen.width = = 812)
    );

Export function Ifiphonex (Iphonexstyle, Regularstyle) {
    if (Isiphonex ()) {return
        iphonexstyle;
    } else { return
        Regularstyle
    }
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19-20

How to use:

Import {Ifiphonex} from ' React-native-iphone-x-helper '
 style:{
        height:60,
        backgroundcolor: ' Transparent ',
        ... Ifiphonex ({
            paddingtop:50
        }, {
            paddingtop:20
        })
    },

1 2 3 4 5 6 7 8 9 10

Import {Isiphonex} from ' React-native-iphone-x-helper '
if (Isiphonex ()) {
    //Does this ...
} else {
    //D o that ...
}

1 2 3 4 5 6

2. Safe-area-view Safety Zone

The best plastic Surgery hospital in Ningbo http://www.lyxcl.org/
Ningbo Good plastic Surgery Hospital http://www.lyxcl.org/
Security Area diagram:

Project Address: Https://github.com/react-community/react-native-safe-area-view
How to use:

<SafeAreaView>
  <View>
    <Text>test</Text>
  </View>
</ Safeareaview>

1 2 3 4 5