React Native

설치

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

리액트 네이티브[React Native] – 시작하기

 

튜토리얼

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

VSCode for React Native

 

Redux

https://velopert.com/1225

[React.JS] 강좌 10-1편 Redux: React 앱의 효율적인 데이터 교류 | VELOPERT.LOG

 

Expo vector icons

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

@expo/vector-icons directory

 

 

Video with expo

react-native-video
react-native-video-player

 

full source

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

eyalcohen4/react-native-video-sample

출처

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

How To Play Video With React Native And Expo

 

 

 

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

Change Makefile variable value depending on a target

 

 

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에서 신뢰할 수 없는 개발자라고 뜨면
설정 > 일반 > 기기 관리 > 개발자 앱 탭 클릭을 하면
신뢰 설정으로 바꿔야 할 앱이 표시되는데 이 앱을 신뢰한다고 바꿔주면 끝