더북(TheBook)

HeaderlessScreen을 다음과 같이 수정해보세요.

screens/HeaderlessScreen.js

import React from 'react';
import {View, Text, Button} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';

function HeaderlessScreen({navigation}) {
  return (
    <SafeAreaView>
      <View>
        <Text>Header가 없네?</Text>
          <Button onPress={() => navigation.pop()} title="뒤로가기" />
      </View>
    </SafeAreaView>
  );
}

export default HeaderlessScreen;

다시 확인해볼까요? 이제 iOS에서도 StatusBar 영역을 침범하지 않고 화면이 잘 나타나죠?

▲ 그림 5-14 SafeAreaView 적용

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.