反応ネイティブが適応IPhoneXシリーズ機器<SafeAreaView />

　　SafeAreaViewその目的は、「安全」表示可能領域内のコンテンツをレンダリングすることです。具体的には、iPhone Xフルスクリーンデバイスは、「フリンジ」であるので、目に見えない「前髪」範囲にコンテンツをレンダリング回避する必要があります。このコンポーネントは、現在、唯一のiOSデバイスをサポートしており、iOSのバージョン11以上。

　　SafeAreaView自動的にさまざまな内部ナビゲーションシステム、ツールバーや脇に置きスペースに応じてコンテンツをレンダリングします。さらに重要なのは、それも考慮に、このような丸みを帯びた角などや画面表示のできない「フリンジ」領域の上部中央付近のデバイスの画面の限界を、かかります。

　　サンプルコード：

import {
  // …
  SafeAreaView
} from 'react-native';
class Main extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <App />
      </SafeAreaView>
    )
  }
}
const styles = StyleSheet.create({
  // …,
  safeArea: {
    flex: 1,
    backgroundColor: '#ddd'
  }
})

　　通常在开发过程中，为了适配IPhonX设备，需要开发者自己来做代码操作。例如下面是判断iPhone X的工具类。

import {
    PixelRatio,
    Dimensions,
    Platform
} from 'react-native';

export let screenW = Dimensions.get('window').width;
export let screenH = Dimensions.get('window').height;
// iPhoneX
const X_WIDTH = 375;
const X_HEIGHT = 812;

/**
 * 判断是否为iphoneX
 * @returns {boolean}
 */
export function isIphoneX() {
    return (
        Platform.OS === 'ios' &&
        ((screenH === X_HEIGHT && screenW === X_WIDTH) ||
            (screenH === X_WIDTH && screenW === X_HEIGHT))
    )
}

/**
 * 根据是否是iPhoneX返回不同的样式
 * @param iphoneXStyle
 * @param iosStyle
 * @param androidStyle
 * @returns {*}
 */

export function ifIphoneX(iphoneXStyle, iosStyle, androidStyle) {
    if (isIphoneX()) {
        return iphoneXStyle;
    } else if (Platform.OS === 'ios') {
        return iosStyle
    } else {
        if (androidStyle) return androidStyle;
        return iosStyle
    }
}

　　在适配前进行相关的判断，然后使用SafeAreaView进行适配即可。例如：

/**
 * 根据是否是iPhoneX返回不同的样式
 * @param iphoneXStyle
 * @param iosStyle
 * @param androidStyle
 * @returns {*}
 */
export function ifIphoneX(iphoneXStyle, iosStyle = {}, androidStyle) {
  if (isIphoneX()) {
    return iphoneXStyle;
  } else if (Platform.OS === 'ios') {
    return iosStyle
  } else {
    if (androidStyle) return androidStyle;
    return iosStyle
  }
}

反応ネイティブが適応IPhoneXシリーズ機器<SafeAreaView />

おすすめ