기본 콘텐츠로 건너뛰기

React Native 개발 도전 - 개발환경 구축 부터 프로젝트 생성 및 빌드까지 (1)



개발장비 - mac book air
작성일 : 2018.4.16
 - react native 공식홈페이지 및 제타위키 기준 최신내용으로 작성했습니다

1. xcode 설치
xcode > preferences > locations > "Command Line Tools:" 부분에 Xcode 로 설정

이걸 안해주면 아래 명령중에 npm start 후에 ios 에뮬레이터로 실행하기가 작동하지 않는다 

2. Android studio 설치


3. jdk 설치
curl -s "https://get.sdkman.io" | bash
source "$HOME/.sdkman/bin/sdkman-init.sh"
sdk version
sdk install java

4. react native IDE 구성
4-1) homebrew 설치
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

4-2) nodejs 설치
brew install node

4-3) yarn 설치
brew install yarn

4-4) watchman 설치
brew install watchman

4-5) react-native-cli 설치
sudo npm install -g react-native-cli

5. visual studio code (에디터) 설치 
(뭐.. 이건 RN 소스코딩할때 편하자고 설치한건데, Atom 이라는것도 있고 각자 편한걸 사용하세요, 근데 전 Atom도 써봤는데 VS code가 상당히 빠르게 동작하고 좋더라구요)

6. myapp 이라는 프로젝트 생성
맥북에서 콘솔을 열고 아래명령 입력
react-native init myapp

7. 실행하기
그럼 결과적으로 
myapp 디렉토리가 생길것이다
이 디렉토리에서 앱을 개발하게되며
ios 와 android 디렉토리가 있는데

ios 디렉토리 하위에 xcodeproject 파일을 더블클릭하면
xcode 상에서 열고 에뮬레이터에 올리거나 폰에 올려볼 수 있다 

android 디렉토리 또한 android studio 를 열고 해당 디렉토리를 import 하여 프로젝트를 구동할 수 있다

뭐.. xcode 랑 android studio 로 열어봤다면
앱스토어 배포는 기존 네이티브 앱 개발할때와 동일하니까 
따로 설명하진 않겠다 

--------------------------------------------------------------

여담

몇몇 블로그에서는 EXPO 를 알려주기도한다
nomad coder 이라는 외국개발자도 EXPO를 알려준다

근데.. EXPO로 생성한 프로젝트에 아무짓도 않하고 
IOS설치파일인 .ipa 를 만들어봤는데

뭔 개발 1도 안했는데 100MB가 넘게 나와 ? 
편한건 좋은데 이건 좀 아니지.. 

아무튼 난 저 말도 안되는 용량때문에라도 expo를 프로젝트를 만들지 않기로 결정했다


---------------------------------------------------------------


装备-mac book air

制作日期:2018.4.16

-以react native官方网站及Zeact Witive为最新内容制成。



1.设置xcode

"xcode>preferences>locations>""Command Line Tools:"部分为Xcode
如果不做这个,下面的命令在下一个命令中就不会启动ipm的应用程序 


2.Android studio设置




3.设置jdk
curl-s"https://get.sdkman.io"
source'source/sdkman/sdkman/bin/sdkman-init.sh'
sdk version
sdk install java

4.react native IDE构成
4-1)homebrew安装
/usr/ruby-e"kuby-e"(curl-fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)")

4-2)node js安装
brew install node

4-3)yarn安装
brew install yarn

4-4)watchman设置
brew install watchman

4-5)react-native-cli设置
sudo npm install-g react-native-cli

5.visual studio code设置 
(这件事是在哈哈酱料中安装了方便的时候,也有Atom的意思,也是使用了Atom,但是使用了Atom也很快的,但是还是很快的动作很快的动作。

6.myapp名为"myapp"项目
在Macbook上打开控制台,输入下命令
react-native init myapp

7.实行
那么,结果 
会产生myapp dythory
在这个目录里开发应用程序
有ios和android dellotion

双击查询icodeproject文件时
可以在xcode上打开,上传到模拟装置上或上传到手机上 

android defroid也可以启动android studio,可以启动相应目录,启动工程目录。

如果是xcode lndroid studio
应用程序商店与现有应用程序开发应用程序相同 
不另说明 

爱丽丝梦游洞爱丽丝爱丽丝褐尾角爱丽丝褐尾角鸟爱丽丝褐尾角鸟爱丽丝褐尾角鸟爱丽丝褐偶异类爱丽丝褐尾宿钻石爱丽丝褐尾宿钻石褐眼鸟爱丽丝李恪褐眼鸟李恪褐花镜褐眼鸟李恪褐眼鸟李恪褐眼鸟李恪褐花鸥褐眼鸟李恪

闲话

在一些博客上,甚至会告知EXPO
nomad coder的外国开发者也告诉我们EXPO

但是.. 用EXPO生成的项目做了什么事 
IOS设置了ipa,制作了ipa

没怎么开发,竟然超过了100兆韩币? 
舒服的是挺好的,但这不是一点嘛。 

不管怎样,我也决定不让自己的话也不能制作expo项目。

댓글

이 블로그의 인기 게시물

리눅스 부팅시 스크립트 실행하기

서버를 끄고 켤때  실행되어야할 명령 혹은 프로세스들이 있을것이다. 이것들을 서버를 켜고 매번 직접 실행시켜준다면 누락의 위험도 잇고.. 번거롭기도 하고  그리하여  윈도우즈에서 시작프로그램에 등록하면 컴퓨터가 다 켜졌을때 알아서 실행해주듯이 리눅스에도 이와같은 기능이 있다.  ============================================================= 기본배경지식 리눅스는 부팅이되면서  런레벨에 맞는 작업을 수행하며  각 런레벨의 작업은 아래와 같이 분리된다.  /etc/rc.d/rc0.d           runlevel 0 /etc/rc.d/rc1.d             runlevel 1 /etc/rc.d/rc2.d             runlevel 2 /etc/rc.d/rc3.d             runlevel 3 /etc/rc.d/rc4.d             runlevel 4 /etc/rc.d/rc5.d             runlevel 5 /etc/rc.d/rc6.d             runlevel 6 /etc/rc.d/rc.local         모든 부팅작업이 완료된 다음 마지막에 수행  ============================================================= 부팅시 스크립트 실행하기  방법 1. 난이도 (하),  rc.local 에 등록하기. rc.local 을 편집기로 열어서  vi  /etc/rc.d/rc.local    실행하고자 하는 스크립트를 작성  톰캣을 실행한다고 했을때 예제 : su - root -c /tomcat/bin/startup.sh  위에서 root 부분은 사용자계정으로 실행하고싶을 시 사용자계정을 적용해주면 되고.. 뒤에 톰캣 startup.sh 경로는 본인에 상황에 맞는 경로로 ~  방법 2. 난이도 (중) 서비스로 등록하기  방법2는 .. 조금 내용도 길고 이해가 필요하므로 잘 정리되어있는 이곳을 참조하자.  http

Redhat 7, CentOS 7 이상버전의 locale 설정 (언어설정)

레드햇과, 센트오에스 6점대 버전까지는 /etc/sysconfig/i18n 이곳에 인코딩설정을 해서 처리했었지만 7부터는 i18n을 사용하지 않는다. 필요할법한 명령어들을 정리해봤으니 참고해서 사용하면 되겠다. 1. 현재 언어셋팅상태 확인 env |grep -e LANG -e LC 또는 locale 2. 시스템에서 지원 가능한 캐릭터셋 확인 localectl list-locales 3. 콘솔명령어를 통해 locale설정 변경 localectl set-locale LANG={적용할 캐릭터셋} ex) localectl set-locale LANG=ko_KR.euckr 4. 캐릭터셋 수동설정 vi /etc/locale.conf 로 파일을 연다음 아래 내용을 작성 LANG={적용할 캐릭터셋} ex) LANG=ko_KR.euckr 설정 완료후 재부팅시 locale명령을 통해 원하는 캐릭터셋이 유지되는지 확인

vscode (visual studio code) 한글 인코딩 설정

1. 파일 -> 기본설정 -> 설정 에서 나오는 설정화면 우측에 아래 두개 내용을 추가 "files.encoding" : "EUC-KR" , "files.autoGuessEncoding" : true 위에는 항상 EUC-KR 로 인코딩하겠다는 기본설정을 바꾸는 내용이며 아래는 현재 파일에 알맞은 인코딩을 알아서 찾겠다는 내용이라고 한다 끝 !