React Native SafeAreaView

概要: このチュートリアルでは、デバイスのセーフエリア境界内にコンポーネントをレンダリングするために、React Native SafeAreaViewコンポーネントを使用する方法を学習します。

SafeAreaViewは、デバイスのセーフエリア境界内にネストされたコンテンツをレンダリングするためのコンテナとして機能するReact Nativeのコンポーネントです。

ネストされたコンポーネントをレンダリングすると、ナビゲーションバー、ツールバーなどで覆われていないビューの部分を反映するために、自動的にパディングが適用されます。

SafeAreaViewはViewコンポーネントのすべてのpropsを継承することに注意してください。

次の例では、画面に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コンポーネントを使用します。