native file들을 더 많이 컨트로로 하고 싶을 때 사용한다.
React Native CLI를 사용하면 xcode 파일을 생성하고, 안드로이드 파일을 생성하여 양쪽 파일들이 리엑트 네이트브에서 실행된다.
양쪽 파일에 다 접근할 수 있기 때문에 어떤 때에는 둘을 합칠수도 있다.
모든 native file들은 숨기고 모든것을 관리한다.
react native cli에 비하여 빠르게 핸드폰에서 앱을 테스트할 수 있다.
앱을 build하는 방식, simulation, react native update를 처리해주며, react native에 비해 더 많은 모듈들이 있다.
expo는 create-react-app과 같으며 그 위에 더 많은 것들을 제공해준다.
CLI에 비해 수동적으로 진행해야하는 작업이 덜하고 시작하는데 훨씬 빠르다.
native file에 대한 접근은 할 수 없다.
expo init AwsomeProject
// 자동으로 expo dev tool을 열어준다.
npm start
expo dev tool이 열리면 핸드폰으로 QR코드를 스캔하면 핸드폰에서 앱을 실행해볼 수 있다.
코드 수정 후 저장하면 자동으로 리프레쉬 되며(Live Reload) 변경된다.
핸드폰에서 개발자 메뉴에 접근하고 싶다면 핸드폰을 흔들면 되며 시뮬레이터에서 개발자 메뉴를 열려면 command+D를 누른다.
import {StyleSheet, View, Text} from "react-nraive";
여기서 View는 리액트에서의 div와 같은 역할을 한다. 모든걸 View 안에 집어 넣어야 한다.
리액트 네이티브에는 그만의 규칙들이 있는데, 웹사이트에서 텍스트를 넣을 때 사용하는 span의 경우에는 Text 를 사용하며 이런 룰이 존재하는 이유는 브릿지 때문이다.
리액트 네이티브는 CSS 엔진을 구현했기 때문에 flex box와 같은 것들을 사용할 수 있으며 차이점은 자바스크립트 오브젝트와 같이 사용해야한다는 점이다.
export default function App() {
return (
<View style={styles.container}>
<Text>Hello!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
// color: "white",
justifyContent: 'center',
},
});
리액트 네이티브에서는 default로 flex-direction이 column이다. (웹사이트는 defualt로 flex-direction이 row이다.)
flex:1 은 모든 공간을 사용한다는 것을 의미한다.
const styles = StyleSheet.create({
container: {
flex: 1,
},
yellowView: {
flex:1
},
blueView: {
flex:1
}
});
만약 부모 container 안에 각자의 view의 flex가 1이라면 각자가 최대한 차지할 수 있는 만큼 전체 공간에서 반반씩 차지하게 되며, blueView의 flex가 2라면 yellow는 삼분의 일, blue는 삼분의 2의 공간을 차지하게 된다.
flex-direction, justify-content, align-items, flex-wrap, no-wrap도 똑같이 동작한다.
width, height를 많이 쓸 필요가 없이 flex를 사용하면 핸드폰의 크기에 관계 없이 맞춰진다.
//location은 android studio에서 configure -> SDK manager에서 확인 가능
sdk.dir = /Users/USERNAME/Library/Android/sdk
export ANDROID_HOME=/Users/USERNAME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools