[React Native] View, Text, StyleSheet 주의사항

View, Text, StyleSheet는 react-native에서 불러와 사용해야 한다.

기존 html의 div대신 View를 사용하고 문자열은 무조건 Text 컨포넌트 안에 들어있어야 한다.

CSS 기능을 대부분 사용할 수 있지만, 사용할 수 없는 것들도 존재한다. (ex : border)

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello! I made a APP!</Text>
      <StatusBar style="auto" />
    </View>
  );
}
//View = container 모드 div 대신 view를 사용 
// 모든 text는 text Component안에 써야함. p span 없음
// View 안에 스타일이 있음 

const styles = StyleSheet.create({  //오브젝트 생성 Style.sheet{}
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text:{
    fontSize: 28,
    color: blue,
  }
});
// 웹 디자인 일부는 사용 불가, 98%정도는 사용 가능

코드를 직접 확인하고 싶다면, https://snack.expo.dev를 사용하자.