- 앱 개발시 선택하는 방법
- Native (Java, Kotlin, Object-C, Swift) 말고 선택 시
- Flutter 또는 React Native입니다
- React Native는 개발 도구로 Expo, React Native Cli 제공
- React Native Cli 환경설정이 까다롭다
- iOS, Android 개발이 가능한데, iOS는 반드시 맥(Mac) 필요
-
Power Shell을 관리자 모드로 실행
-
아래 문장을 입력 후 엔터
Set-ExecutionPolicy Bypass -Scope Process -Force;
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072;
iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))- Power Shell에
choco입력 후 버전이 출력되는지 확인
Chocolatey v2.4.2
Please run 'choco -?' or 'choco <command> -?' for help menu.- Power Shell 관리자 모드에서 choco를 이용해서 설치 필요
choco install -y nodejs-lts microsoft-openjdk17-
시작화면 > More Action > SDK Manager에서 세팅 가능
-
File > settings... 메뉴에서 세팅 가능
-
Android API 35("VanillaIceCream")
Android SDK Platform 35
ARM 64 v8a System Image
Intel x86_64 Atom System Image
Google APIs ARM 64 v8a System Image
Google APIs Intel x86_64 Atom System Image
Google Play ARM 64 v8a System Image
Google Play Intel x86_64 Atom System Image
- Android 14.0("UpsideDownCake")
Android SDK Platform 34
Source for Android 34
ARM 64 v8a System Image
Intel x86_64 Atom System Image
Google APIs ARM 64 v8a System Image
Google APIs Intel x86_64 Atom System Image
Google Play ARM 64 v8a System Image
Google Play Intel x86_64 Atom System Image
- Android 13.0("Tiramisu")
Android SDK Platform 33
ARM 64 v8a System Image
Intel x86_64 Atom System Image
Google APIs ARM 64 v8a System Image
Google APIs Intel x86_64 Atom System Image
Google Play ARM 64 v8a System Image
Google Play Intel x86_64 Atom System Image
- Android SDK Platform
- Android Virtual Device
- Android SDK Buil-Tools 36-rc5
- NDK
- CMake
- Android Emulator
- Android Emulator hypervisor driver
- Android SDK Platform-Tools
- Google Play Service
C:\Users\Administrator\AppData\Local\Android\Sdk
- 시작화면 > More Action > Virtual Device Manager에서 세팅 가능
- 우측 화면 상단의 Device Manager 에서 추가
Pixcel 7으로 생성
- 윈도우 하단 툴바의 검색창에서
시스템 설정검색 후 진입환경 변수 버튼클릭
- 새로 만들기 (사용자 변수, 시스템 변수 둘다 적용)
- 변수 명 :
ANDROID_HOME - 변수 값 :
C:\Users\Administrator\AppData\Local\Android\Sdk
- 변수 명 :
- 수정 및 추가
path항목 더블클릭- 항목 추가 :
%ANDROID_HOME%\platform-tools
Get-ChildItem -Path Env:\엔터adb --version엔터- 결과가 안나오면 PC를 껐다가 켜보자
- 절대로 한글 폴더에 생성하시면 안됩니다
- 특수기호가 포함된 앱이름은 배제하자
npx react-native@0.72.6 init 앱이름 --version 0.72.6
- Android Studio 실행 > Device Virtual Machine 을 실행해 놓고 진행
cd android로 anodroid 폴더로 이동- 터미널에
./gradlew clean으로 프로젝트 다시 초기화 - 완료 후
cd ..상위폴더 이동 - 다시
npm run start실행 후 결과 확인 - 그래도 안되면
npx react-native doctor명령으로 현재 상태 확인 후 조치
- https://www.npmjs.com/package/react-native-webview
npm i react-native-webview
import React from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import WebView from 'react-native-webview';
const App = (): JSX.Element => {
const webViewUrl = 'https://app-fish-y3pa.vercel.app';
return (
<SafeAreaView style={styles.container}>
<WebView source={{uri: webViewUrl}} style={styles.webview} />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000',
},
webview: {
flex: 1,
},
});
export default App;