Expo 앱 초기화, RN프로젝트 시작

시작

새로운 Expo 앱을 초기화 하는 방법은 터미널에 다음 명령을 실행하는 것이다.

npx create-expo-app@latest StickerSmash

 

 

출력

 

참고 : https://docs.expo.dev/tutorial/create-your-first-app/

Create your first app

 

보일러 플레이트 코드 제거하기

초기 Expo앱을 생성하면 더미코드가 존재한다. 이를 제거할 수 있다.

npm run reset-project

 

 

실행하기

npx expo start

 

 

expo-go 애플리케이션을 설치한 뒤 QR을 스캔하여 실제 기기에서 실행시킬 수도 있다.

 

app/index.tsx화면을 수정하기 (공식문서 내용)

import { Text, View,  StyleSheet } from 'react-native';

export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home screen</Text>
    </View>
  );
}

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

 

1. <View>는 <div>와 같은 컨테이너 개념며 스타일은 StyleSheet를 이용한다.

2. app디렉토리의 index.tsx의 의미는 url이 '/' 인 경우 보여주는 페이지이다.

3. _layout.tsx파일은 Stack에 관한 내용이 들어간다.

4. 여러개의 탭을 만드는 경우 루트 레이아웃(app/_index.tsx)에서 탭들을 보여주면 되며 화면 내부에서 이동은 Stack 정의한 (tab)디렉토리 (app/(tab)/sample.tsx)들 끼리 이루어진다.

 

4번관련 라우트 내용은 추후 다룬다.

참고: https://docs.expo.dev/router/installation/

Install Expo Router