[RN] SafeAreaView의미

SafeAreaView 컴포넌트는 iphone X 이상 기종에서 디스플레이의 보이지 않는 영역 및 최하단 영역에 내용이 보여지는 것을 방지해줍니다.

 

 

 

화면의 전체 영역을 사용할것이다. 

따라서 가장 먼저 해야 하는 작업은 App 컴포넌트의 SafeAreaView가 전체영역을 사용하게끔 설정하는 것이다.

이 작업은 flex 스타일 속성을 1로 설정하면 된다.

 

flex 스타일 속성을 1로 설정하는 것은 자신이 위치한 곳의 영역을 모두 차지하겠다는 의미이다.

 

---

예시

import React, {useState} from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import Counter from './components/Counter';

const App = () => {
  const [count, setCount] = useState(0);
  const onIncrease = () => setCount(count + 1);
  const onDecrease = () => setCount(count - 1);

  return (
    <SafeAreaView style={styles.full}>
      <Counter count={count} onIncrease={onIncrease} onDecrease={onDecrease} />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  full: {
    flex: 1,
    // backgroundColor: 'pink',
  },
});

export default App;

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

function Counter({count, onIncrease, onDecrease}) {
  return (
    <View style={styles.wrapper}>
      <View style={styles.numberArea}>
        <Text style={styles.number}>{count}</Text>
      </View>
      <Button title="+1" onPress={onIncrease} />
      <Button title="-1" onPress={onDecrease} />
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  numberArea: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  number: {
    fontSize: 72,
    fontWeight: 'bold',
  },
});

export default Counter;