今日から毎日ReactNativeを学ぶことにした(22日目)

セリエA以外のリーグで今シーズン応援するチームが決まった

前回

本日

Safe areas

実装したコンテンツがアプリ画面と被らないように安全エリアを確保する必要があるとのこと。

npx expo install react-native-safe-area-context

react-native-safe-area-contextをインストール

import { Text } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export default function HomeScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Text>Content is in safe area.</Text>
    </SafeAreaView>
  );
}

SafeAreaViewタグで囲うだけ

比較対象がないので挙動として正しいかは怪しい…一応できていということにする。あとは本番で使用する機会があった場合に掘ってみる。

本日のまとめ

終バスが終わるのでミニマムで終了

この記事が気に入ったらサポートをしてみませんか?