상태바 가림 이슈 해결

문제 상황

해결방안

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

export default function App() {
  return (
    <SafeAreaView style={{flex:1, backgroundColor:'#ffff33'}}>
      <View style={{flex:1, backgroundColor:'#ffffcc'}}>
        <Text>여기는 안전하구만!</Text>
      </View>
    </SafeAreaView>
  );
}

SafeAreaView 위, 아래 색상 다르게 설정

1. Fragment로 감싸고

2. SafeAreaView 2개 형제로 선언
• 상단 부분은 flex:0
• 하단 부분은 flex:1

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

export default function App() {
  return (
    <>
      {/* SafeArea 상단 부분 */}
      <SafeAreaView style={{ flex: 0, backgroundColor: '#ffff33' }}>
      </SafeAreaView>

      {/* SafeArea 하단 부분 */}
      <SafeAreaView style={{ flex:1, backgroundColor:'#FF4A89' }}> 
        {/* 본문 */}
        <View style={{flex:1, backgroundColor:'#ffffff'}}>
          <Text>블라블라</Text>
        </View>
      </SafeAreaView>
    </>
  );
}