React Native: SafeAreaView, 재사용 가능한 컴포넌트 및 색상

💡 SafeAreaView

• 실행 중인 장치를 자동으로 감지하고, 노치 및 상태 표시줄과 콘텐츠 사이에 적절한 간격을 자동으로 설정하는 컴포넌트

	import { SafeAreaView } from "react-native";
    
	<SafeAreaView>
        {screen}
 	</SafeAreaView>

💡 재사용 가능한 컴포넌트

1. 'components' 폴더 생성
2. '이름.js' 파일 생성

  import { Text, StyleSheet } from "react-native";

  function Title({children}) {
      return <Text style={styles.title}>{children}</Text>;
  }

  export default Title;

3. 필요한 곳에 컴포넌트 사용

  import Title from "../components/Title";

  <Title>Oppoenet's Guess</Title>

💡 재사용 가능한 색상

1. 'util' 혹은 'constants' 폴더 생성
2. 'colors.js' 파일 생성

  const Colors = {
      primary500: '#72063c',
      primary600: '#640233',
      accent500: '#ddb52f',
  };

  export default Colors;

3. 필요한 곳에 색상 사용

  import Colors from "../constants/colors";

  android_ripple={{ color: Colors.primary600 }}