리액트 네이티브 하이브리드 앱 개발

1. node.js 설치

2. vs code 설치

3. expo 설치 (mobile)

4. expo 가입 후 로그인 (PC, mobile) 

5. Expo CLI 설치

npm i -g expo-cli

 

6. expo 앱 실행

npx create-expo-app myapp

 

7. EAS CLI 설치

npm i -g eas-cli

 

8. EAS 로그인

eas login

 

9. 프로젝트 설정

cd myapp

eas build:configure

 

eas.json 파일 생성됨

 

10. eas.json 파일에 다음 코드 설정

 

https://docs.expo.dev/build-reference/apk/

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

 

11. eas 빌드

 

eas build -p android --profile preview

 

12,, 앱 링크 다운로드 후 설치

 

https://expo.dev/artifacts/eas/3UEpTvYEoE2ojiejRmLhTp.apk

 

13. React Native webview 설치

 

npx expo install react-native-webview

 

14. web 링크 설정

 

App.js 코드를 다음과 같이 변경

import * as React from 'react';
import { WebView } from 'react-native-webview';


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

const styles = StyleSheet.create({ ... }); 

 

15. 다시 eas 빌드

 

11번 참고