React Native SafeAreaView

摘要: 本教程将教你如何使用 React Native SafeAreaView 组件在设备的安全区域边界内渲染组件。

SafeAreaView 是 React Native 中的一个组件，用作容器，在设备的安全区域边界内渲染嵌套内容。

在渲染嵌套组件时，它会自动应用填充，以反映未被导航栏、工具栏等覆盖的视图部分。

请注意，SafeAreaView 继承了View 组件的所有道具。

以下示例在屏幕上显示一个Text 组件

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

const App = () => {
    return (
        <View style={styles.container}>
            <Text>This is a message from JavaScriptTutorial.net</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
})

export default App;Code language: JavaScript (javascript)

但是，该应用程序不会在安全区域边界内渲染文本

要解决此问题，您可以将View 替换为SafeAreaView，如下所示

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

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Text>This is a message from JavaScriptTutorial.net</Text>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
})

export default App;Code language: JavaScript (javascript)

输出

摘要

• 使用SafeAreaView 组件在设备的安全区域边界内渲染嵌套组件。