💻[React Native] Expo로 TodoList 만들기

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

console.log("hello")
export default function App() {
  return (
    <View style={styles.container}>
      <Text></Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

container style을 제거하면, 도치가 있는 플랫폼과 같은 경우 이에 가려지거나 상단 위로 올라가서 레이아웃이 깨지는 문제가 발생할 수 있다.

• 이때, 각 기기마다 또한 화면 비율이 다르기 때문에, React Native에서는 SafeAreaView라는 컴포넌트를 제공함.
• 이에 따라서 위에도 일부분 아래에도 일부분(홈버튼과 관련된 기능이 더 우선권을 가져서, 버튼 등의 컴포넌트가 제대로 동작하지 않을 수 있으므로) 사용하지 않도록 조정해줌
• 안드로이드의 경우 운영체제 상단에 상태바가 존재함, 이때 상태바에 의해 컴포넌트 일부가 깨지는 경우가 있음, 따라서 이를 레이아웃측면에서 잡아주어야 함
  이때 사용하는 패키지는 Constants
• import Constants from 'expo-constants'; 패키지를 불러오고, paddingTop: Constants.statusBarHeight, style에 이를 저장 but 아이폰에서는 쓸데 없는? 빈 공간이 생길 수 있다는 단점이 존재
• 플랫폼을 지정한 후 이를 사용할 수 있게 함 Platform을 이용
  paddingTop: Platform.OS === 'android' ? Constants.statusBarHeight : 0

Padding, Row와 같은 style을 자체 component로 바꾸어서 설정해 주기
App.js

<Padding padding={12}>
        <TodoItem />
        <Row>
          <TextInput style={styles.input} />
          <Button title="Send" onPress={() => {}} />
        </Row>
      </Padding>

Padding.js

function Padding({ children, padding }) {
  return <View style={{ padding: padding ?? 20 }}>{children}</View>;
}

### Expo checkbox