react native ios 兼容全面屏的终极版

主要是DeviceInfo.isIPhoneX_deprecated判断ios是不是全面屏，然后是全面屏的时候，给上面增加1个44高度的view，下面增加1个34的view，然后利用react children组件包裹其他的路由即可

genSafeAreaViewPlus() {
        const { children, topColor, bottomColor, topInset, bottomInset } = this.props;
        return <View style={[styles.container, this.props.style]}>
            {this.getTopArea(topColor, topInset)}
            {children}
            {this.getBottomArea(bottomColor, bottomInset)}
        </View>;
    }

最后提供1个组件的完整版

import React, { Component, } from 'react';
import { DeviceInfo, SafeAreaView, StyleSheet, View, ViewPropTypes } from 'react-native';
import { PropTypes } from 'prop-types';

export default class SafeAreaViewPlus extends Component {
    static propTypes = {
        ...ViewPropTypes,
        topColor: PropTypes.string,
        bottomColor: PropTypes.string,
        enablePlus: PropTypes.bool,
        topInset: PropTypes.bool,
        bottomInset: PropTypes.bool,

    };
    static defaultProps = {
        topColor: 'transparent', // 上边颜色
        bottomColor: '#f8f8f8', // 下面颜色
        enablePlus: true, // 
        topInset: true, // 上面默认显示
        bottomInset: false, //  导航栏下面默认不显示
    };

    genSafeAreaViewPlus() {
        const { children, topColor, bottomColor, topInset, bottomInset } = this.props;
        return <View style={[styles.container, this.props.style]}>
            {this.getTopArea(topColor, topInset)}
            {children}
            {this.getBottomArea(bottomColor, bottomInset)}
        </View>;
    }

    genSafeAreaView() {
        return <SafeAreaView style={[styles.container, this.props.style]} {...this.props}>
            {this.props.children}
        </SafeAreaView>
    }

    getTopArea(topColor, topInset) {
        return !DeviceInfo.isIPhoneX_deprecated || !topInset ? null
            : <View style={[styles.topArea, { backgroundColor: topColor }]} />;
    }

    getBottomArea(bottomColor, bottomInset) {
        return !DeviceInfo.isIPhoneX_deprecated || !bottomInset ? null
            : <View style={[styles.bottomArea, { backgroundColor: bottomColor }]} />;
    }

    render() {
        const { enablePlus } = this.props;
        return enablePlus ? this.genSafeAreaViewPlus() : this.genSafeAreaView();
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    topArea: {
        height: 44,
    },
    bottomArea: {
        height: 34,
    }
});

组件的运用方法

export default class page2 extends React.Component {
  render() {
    const { navigation } = this.props
    return <SafeAreaViewPlus topColor={'#46a3a9'}>
      <StatusBar
        animated={true} //指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle和hidden  
        hidden={false}  //是否隐藏状态栏。  
        backgroundColor={'#46a3a9'} //状态栏的背景色  
        translucent={Platform.OS === 'android' ? false : true}//指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。  
        barStyle={'light-content'} // enum('default', 'light-content', 'dark-content')   
      />
      <ScrollView style={{ flex: 1 }}>
        <View style={styles.container}>
          <Text>view2</Text>
        </View>
      </ScrollView>
    </SafeAreaViewPlus>

  }
}