详解safearea

在不同的手机设备和屏幕尺寸下，我们的应用可能会遇到一些显示问题，例如在部分机型上底部的tabbar会与系统的底部操作栏重叠，或者部分内容会被缩放，影响用户体验，为了解决这些问题，苹果在iOS 11中推出了safearea，作为新的布局指南，本文将为大家详解safearea。

一、什么是safearea

Safe area是指可见屏幕中可以安全显示内容的区域，不会被屏幕裁剪或者遮挡，安全区域是一个尺寸更小的矩形，它是在显示屏幕大小和显示比例考虑的基础上而定。

在iPhone X及以上设备上，由于刘海和圆角的出现，导致了屏幕的显示区域发生了变化，因此安全区域也随之改变，如下图所示：

<View style={{ flex: 1, backgroundColor: '#fff', paddingTop: Platform.OS === 'ios' ? isIphoneX() ? 44 : 20 : 0 }}>
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>This is the content of the screen</Text>
  </View>
  <View style={{ height: 50, backgroundColor: '#f1f1f1', paddingBottom: safeBottom }}>
    <Text>This is the content of the bottomView</Text>
  </View>
</View>

二、如何在React Native中使用safearea

1. 使用SafeAreaView组件

SafeAreaView是React Native提供的内置组件，它可以自动检测并且适配不同手机屏幕的安全区域，我们只需要将需要适配的组件包裹在SafeAreaView组件中即可。

import React from 'react';
import { View, SafeAreaView, Text } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>This is the content of the screen</Text>
      </View>
      <View style={{ height: 50, backgroundColor: '#f1f1f1', paddingBottom: 10 }}>
        <Text>This is the content of the bottomView</Text>
      </View>
    </SafeAreaView>
  );
}

2. 使用Dimensions API获取设备尺寸

使用Dimensions API可以获取设备的尺寸信息，结合safeAreaInsets可以计算出安全区域的尺寸，然后在组件中使用该尺寸进行布局。

import React from 'react';
import { View, Text, Dimensions, StyleSheet } from 'react-native';

const { width, height } = Dimensions.get('window');

export default function App() {
  const { safeAreaInsets: { top, bottom } } = useSafeArea();

  const styles = StyleSheet.create({
    container: {
      paddingTop: top,
      paddingBottom: bottom,
      width,
      height: height - top - bottom,
      backgroundColor: '#fff',
    },
    content: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    bottomView: {
      height: 50,
      backgroundColor: '#f1f1f1',
      paddingBottom: bottom,
    },
  });

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <Text>This is the content of the screen</Text>
      </View>
      <View style={styles.bottomView}>
        <Text>This is the content of the bottomView</Text>
      </View>
    </View>
  );
}

三、打造完美的页面

对于绝大部分使用者而言，页面的设计布局至关重要，如何合理地使用safearea才能让自己的页面展现得更加完美？下面是我总结的一些技巧：

1. 定义顶部和底部的占位符

可以通过设置paddingTop和paddingBottom的方式来实现顶部和底部的占位符，例如：

<View style={{ flex: 1, backgroundColor: '#fff', paddingTop: Platform.OS === 'ios' ? isIphoneX() ? 44 : 20 : 0 }}>
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>This is the content of the screen</Text>
  </View>
  <View style={{ height: 50, backgroundColor: '#f1f1f1', paddingBottom: safeBottom }}>
    <Text>This is the content of the bottomView</Text>
  </View>
</View>

2. 设置安全区域内的内容

我们可以通过在安全区域内定义我们的内容来尽可能地使用可视区域， 例如：

import React from 'react';
import { View, SafeAreaView, Text } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>This is the content of the screen</Text>
      </View>
      <View style={{ height: 50, backgroundColor: '#f1f1f1', paddingBottom: 10 }}>
        <Text>This is the content of the bottomView</Text>
      </View>
    </SafeAreaView>
  );
}

3. 安全区域内的子级内容

如果需要在安全区域内操作子级内容，可以在子级中再次使用SafeAreaView，例如：

import React from 'react';
import { View, SafeAreaView, Text } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <Text>This is the content of the screen</Text>
        <SafeAreaView style={{ flex: 1, paddingBottom: 10 }}>
          <Text>This is the content of the child component</Text>
        </SafeAreaView>
      </View>
      <View style={{ height: 50, backgroundColor: '#f1f1f1', paddingBottom: 10 }}>
        <Text>This is the content of the bottomView</Text>
      </View>
    </SafeAreaView>
  );
}

四、总结

Safe Area 是一个布局的概念，并不仅仅针对于 iPhone X，iOS 对于这一块提供了非常好的支持，我们可以很方便地在代码中进行适配。文章从什么是safearea开始阐述了safearea的概念及其在React Native应用中的使用方法和技巧，并且提供了实例代码，希望对大家有所帮助。