React Native

React Native

설치

https://blog.wonhada.com/?p=2910

튜토리얼

https://wonhada.com/?docs=리액트-네이티브react-native-0-41/기본the-basics/튜토리얼

어플리케이션 생성

터미널 열기

react-native init FirstProject

를 입력

그러면 'FirstProject' 라는 프로젝트가 생성됩

프로젝트들을 한 곳에 보관하고 싶다면 해당 폴더로 이동한 다음에 실행

iOS

FirstProject 폴더에 ios/ 디렉토리에 있는 FirstProject.xcodeproj 파일을 XCode에서 열기

실행된 XCode의 왼쪽 위를 보면 Run 버튼이 있는데 이 버튼을 누르면 애플리케이션이 빌드되고 실행

그리고 다른 종류의 iOS 시뮬레이터로 배포 타깃을 변경 가능

만약 실패하거나 에러가 발생한다면

FirstProject/ 디렉토리에서 다음 명령을 실행

npm install

npm start

Android

다음 명령어 실행

android avd

실행하고자 하는 애뮬레이터를 선택 후 Start 버튼 클릭

커맨드 라인에서 애뮬레이터를 바로 실행하는 방법도 있고

실행 가능한 모든 애뮬레이터 목록은 다음 명령을 통해 확인가능

emulator -list-avds

애뮬레이터가 실행되었다면 프로젝트 루트 디렉토리로 이동하여 다음 명령으로 애플리케이션을 실행

react-native run-android

위 기반 작업이 모두 끝났을 경우에

'Hello World'에 해당하는 리액트 네이티브 앱을 만드려면

react-native init HelloWorld

명령어를 커맨드 라인에 입력

VSCode에서 설치하면 좋은 Tools

https://medium.com/react-native-training/vscode-for-react-native-526ec4a368ce

Redux

https://velopert.com/1225

Expo vector icons

https://expo.github.io/vector-icons/

Video with expo

react-native-video

react-native-video-player

full source

https://github.com/eyalcohen4/react-native-video-sample

출처

https://medium.com/front-end-hacking/how-to-play-video-with-react-native-and-expo-30523bfcb311

android build failed. SDK location not found Error 대처법

1. Go to the android/ directory of your react-native project

2. Create a file called local.properties with this line:

sdk.dir = /Users/USERNAME/Library/Android/sdk

입력해주고 저장하고

react-native run-android

실행

https://stackoverflow.com/questions/3263435

Device on android debugger 방법

vscode - 터미널 탭에서

adb shell input keyevent 82

입력하면 device에서 reload .. 등등 메뉴 팝업이 뜸

Menu

Reload : 말 그래도 현재 화면을 다시 로딩

Remote JS Debugging : 크롬에서 해당 프로젝트 debugging을 할 수 있음

Hot Reloadng : 이거 설정해두면 VSCode에서 수정하고 저장할 때마다 다시 로딩 해줌 (편함)

버전 체크

react-native -v

버전 변경

npm install react-native@x.x.x

Run On IOS

node_modules 쪽이 꼬여있을 수도 있으니 업데이트 및 re install

해당 프로젝트 디렉토리로 이동

brew update

brew upgrade

brew upgrade node

rm -rf node_modules

npm install

iOS on Emulator

시뮬레이터에서 cmd+D나 cmd+R 이 동작을 하지 않는다면 아래 루트로확인

xcode-->product-->Scheme-->Edit Scheme -->Run -->Build Configuration -->Debug

iOS on Device

Signing ERROR

step 1:

XCode 를 이용해 Run 할 때, Signing Error가 뜬다면

Product > Scheme > Edit Scheme 이동

Edit Scheme 창에서 Build 탭 선택

step 2:

프로젝트 이름 클릭 후 General 탭 클릭

Sining 에서 Team 을 '나(개발자)'로 교체

그러고 에러가 없으면 다행이지만..

에러가 생긴다면 구글링 고고..

출처:

step 1

https://stackoverflow.com/questions/26109851/code-signing-is-required-for-product-type-unit-test-bundle-in-sdk-ios-8-0

step 2

https://stackoverflow.com/questions/37806538/code-signing-is-required-for-product-type-application-in-sdk-ios-10-0-stic

iOS에서 신뢰할 수 없는 개발자라고 뜨면

설정 > 일반 > 기기 관리 > 개발자 앱 탭 클릭을 하면

신뢰 설정으로 바꿔야 할 앱이 표시되는데 이 앱을 신뢰한다고 바꿔주면 끝

from http://sohee1702.tistory.com/128 by ccl(A) rewrite - 2020-03-07 12:21:17

댓글

이 블로그의 인기 게시물

[React] - 18) 프로젝트 빌드하기(+코드 스플리팅)

단위 테스트 환경 구축

React에서 웹팩 설치하기