View

• html의 div에 해당하는 컴포넌트
• react native는 플랫폼간 호환성을 위해 react native의 표준 컨테이너인 View 컴포넌트를 사용한다.

View 의 특징

• display 요소가 기본적으로 flex이다.
• flex-direction의 값이 기본적으로 column이다.
• 다양한 스크린 크기에 대응하기 위해 픽셀 단위의 사이징을 지양하고 flex값을 이용한 비율로 크기를 조정 한다

import { View } from "react-native";

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, backgroundColor: "tomato" }}></View>
      <View style={{ flex: 1.5, backgroundColor: "teal" }}></View>
      <View style={{ flex: 1, backgroundColor: "orange" }}></View>
    </View>
  );
}

• 요소의 크기가 상대적이므로 부모의 flex값이 설정되지 않으면 자식의 크기도 정의되지 않는다.

Text

• 텍스트를 표시하기 위한 react native구성 요소

알아둘점!

react native의 모든 텍스트는 Text 컴포넌트 안에 들어가 있어야 한다

---

StyleSheet

• react-native 에서 제공하는 컴포넌트에 스타일을 적용하는 데 사용되는 JavaScript 객체.
• CSS와 유사한 방식으로 스타일을 정의하고 관리할 수 있고 다른점은 카멜케이스를 사용한다는 점이다.
• StyleSheet.create는 단지 자동완성을 제공해주는 함수이고 기본적으로는 객체이므로 styles = {} 형식으로 제공해도 무방하다.

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
  },
});

//--------------------

...

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
};

...