[왕초보 React Native] 2. The Rules of Native & Pacakges

• 환경
  • winodows 11

• 내용 출처
  • 왕초보를 위한 React Native 101
  • https://nomadcoders.co/react-native-for-beginners/lectures/3116

• The Rules of Native
  • React Native는 웹사이트가 아니다.
  • div, p 사용 불가능, View를 써야한다.
  • 모든 text는 Text component에 들어가야한다.
  • StyleSheet.create 를 통해 원하는 스타일 묶음을 담아놓을 수 있다. (언제든지 사용할 수 있도록)
  • StyleSheet.create를 사용할 경우, 자동완성이 가능해진다.
  • StatusBar : 시계, 배터리, Wi-Fi 등을 폰 윗부분에 표시, 운영체제와 소통(개발자 들을 위한 인터페이스)

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Call Me Scone!</Text>
      <Text>I made a RN App!!</Text>
      <Text>yeah!!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

 

• Packages
  • React Native Docs에 들어가면 Navigate나 AsyncStorage 등의 API가 존재하지 않음을 알 수 있다.( React Native Packages에서는 필수적인 기능만을 제공하게 되었다.)
  • Third Party Packages
    • 커뮤니티 : https://reactnative.directory/
    • Expo SDK : https://docs.expo.dev/versions/latest

 

• 꼭 알아야할 flex (화면 상에서 차지하는 비율 설정)

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{flex: 1, backgroundColor:"tomato"}}></View>
        <View style={{flex: 3, backgroundColor:"teal"}}></View>
        <View style={{flex: 1, backgroundColor:"orange"}}></View>
      </View>
    </View>
  );

// display:flex;flex-direction

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    // alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 28,
    color: "red"
  }
});