Expo - 간단한 React Native 모듈

앱을 만들때 android, ios로 각각 만들어야 되는데 React Native를 사용하면 한번에 두가지를 잡을 수 있다. 

React Native를 더 쉽게 만든게 Expo다. 

다만 단점이 있는데 android나 ios에서 업데이트된 기능이 React Native로 넘어오기까지 시간이 걸리고 

이게 또 Expo로 넘어오는데까지 시간이 또 걸린다. 

https://expo.dev/

Expo

 

1. 일단 회원가입을 진행해준다. 

 

2. Expo 앱을 모바일에 설치해준다. 

Expo는 이제 EAS(Expo Application Services) 방식으로 동작한다. 

 

영어 폴더를 만들어주고 프로젝트를 열어준다. 

npm install -g expo-cli
npm install -g eas-cli

 

3. 위 명령어로 expo-cli와 eas-cli 모듈을 다운받아준다. 

 

4. 새 프로젝트 생성 명령어

npx create-expo-app my-app

 

명령어를 입력해주면 프로젝트 폴더가 생성된다. cd로 해당 디렉터리에 들어가준다. 

 

5. eas login 명령어 실행

eas login

 

 

 

6. 빌드 환경설정을 해준다. 

eas build:configure

 

이렇게 어떤 환경에서 빌드할건지 선택지가 나온다. 

다만 윈도우 컴퓨터에서는 안드로이드 빌드만 가능하고 맥컴퓨터에서는 다 가능하다. 

 

7. APK파일 

안드로이드 기기에 설치를 할려면 eas.json 파일을 아래와같이 설정해야한다. 

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "preview4": {
      "distribution": "internal"
    },
    "production": {}
  }
}

 

아래 명령어를 실행해준다. 

eas build -p android --profile preview

 

id를 설정해야하는데 고유해야한다. 

예: com.expoapp.myapp

보통 중간에 회사이름을 넣고. 마지막에 앱이름을 넣는다. 

그러면 android credentials을 Y하면 expo가 자동으로 만들어준다. 

 

그러면 apk 파일을 다운받을수 있는 주소가 출력된다. 

 

 

7. expo webview만드는 방법

https://docs.expo.dev/versions/latest/sdk/webview/

React Native WebView

 

npx expo install react-native-webview

 

사용방법 react 형식이다.

import { WebView } from 'react-native-webview';
import Constants from 'expo-constants';
import { StyleSheet } from 'react-native';

export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{ uri: 'https://expo.dev' }}
    />
  );
}