React Native 适配iPhone X

项目中，使用Navigation和自定义Header，这样保证iOS和安卓显示的Header一样

navigation的头部高度为，sizeHeader=84，
头部内容为，sizeHeaderContent=44，
解决屏幕的高度问题，这时候直接在AppDelegate中实现
self.window = [[UIWindow alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-34)];

自定义Header

import React, { Component } from 'react';import {    StyleSheet,    View,    Dimensions,    Image,    StatusBar,    TouchableOpacity,    Platform,} from 'react-native';import { Widget } from 'rn-yunxi';const { width, height } = Dimensions.get('window');const BackIcon = require('./back.png');const Text = Widget.Text;//模块声名并导出export default class Header extends Component {    //属性声名    static propTypes = {        navigation: React.PropTypes.any,        showBackAction: React.PropTypes.bool,        backAction: React.PropTypes.func,        title: React.PropTypes.string,        defaultStatusBar: React.PropTypes.bool,        rightTitle: React.PropTypes.string,        rightAction: React.PropTypes.func,        rightIcon: React.PropTypes.element,        containerStyles:React.PropTypes.any,        headerViewStyles:React.PropTypes.any,        backIconSrc:React.PropTypes.number,        showDivider: React.PropTypes.bool    };    //默认属性    static defaultProps = {        title: '',        defaultStatusBar: true,        showBackAction: true,        showDivider: true    };    //构造函数    constructor(props) {        super(props);        this.state = { //状态机变量声明        }    }    //渲染    render() {        return (            <View style={[styles.container,this.props.containerStyles]}>                <View style={[styles.headerView,this.props.headerViewStyles]}>                    {Platform.OS === 'ios' ? <StatusBar barStyle={this.props.defaultStatusBar ? 'default' : 'light-content'} /> : null}                    <View style={styles.header}>                        <View style={styles.titleView}>                            <Text style={styles.title}>{this.props.title}</Text>                        </View>                        {this.props.showBackAction ? <TouchableOpacity                            onPress={() => {                                if (this.props.backAction) {                                    this.props.backAction();                                } else {                                    if (this.props.navigation) {                                        console.log(this.props.navigation);                                        this.props.navigation.goBack();                                    }                                }                            }}>                            <View style={styles.backView}>                                <Image style={{width:22,height:22}} source={this.props.backIconSrc?this.props.backIconSrc:BackIcon} />                            </View>                        </TouchableOpacity> : <View />}                        {this.props.rightTitle ? <TouchableOpacity onPress={() => {                            if (this.props.rightAction) {                                this.props.rightAction();                            }                        }}>                            <View style={styles.rightView}>                                <Text style={this.props.rightTextStyle}>{this.props.rightTitle}</Text>                            </View>                        </TouchableOpacity> : null}                            {this.props.rightIcon}                    </View>                </View>                {                    this.props.showDivider == true ?   <View style={GlobalStyle.styleDividerDefault} /> : null                }                {                    this.props.children                }            </View>        );    }};  const sizeHeader = (Platform.OS === 'ios'&&  ISIPHONEX)?84:Platform.OS === 'ios'?64: 50;  const sizeHeaderMarginTop = Platform.OS === 'ios' ? ISIPHONEX ?35:20: 0  const sizeHeaderContent = Platform.OS === 'ios' ? 44 : 50;//iPhone X  const ISIPHONEX = Dimensions.get('window').width==375 &&        Dimensions.get('window').height == 812const styles = StyleSheet.create({    container: {        flex: 1,        backgroundColor: '#F3F3F3',        width: width,        height: height,    },    headerView: {        backgroundColor: '#FFFFFF',        height: sizeHeader,    },    header: {        justifyContent: 'space-between',        width: width,        marginTop:sizeHeaderMarginTop,        flexDirection: 'row',        height: sizeHeaderContent,        alignItems:'center',        paddingRight:15    },    titleView: {        left: 0,        top: 0,        height: sizeHeaderContent,        position: 'absolute',        width: width,        justifyContent: 'center',        alignItems: 'center'    },    title: {        fontSize: 18,    },    backView: {        justifyContent: 'center',        paddingLeft: 10,        width: 50,        flex: 1,    },    rightView: {        flex: 1,        justifyContent: 'center',        paddingRight: 10,        alignItems: 'flex-end',        minWidth: 50    }});

AppDelegate.m

@property (nonatomic, strong) UIWindow *window;@property (nonatomic,strong) UIViewController * rootViewController;#define is_iPhoneX [UIScreen mainScreen].bounds.size.width == 375.0f && [UIScreen mainScreen].bounds.size.height == 812.0f   //判断是否iPhoneX- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{   if (is_iPhoneX)  {    self.window = [[UIWindow alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-34)];  }else  {    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];  }   _rootViewController = [UIViewController new];   _rootViewController.view = rootView;   self.window.rootViewController = _rootViewController;   [self.window makeKeyAndVisible];}

Header的使用

  render() {        return (                <Header title={'库存查询'} navigation={this.props.navigation}>                </Header>        );    }