Node 및 기본 도구들 설치
$ brew install yarn
$ brew install node
$ brew install watchman
$ brew cask install adoptopenjdk/openjdk/adoptopenjdk8
$ sudo gem install cocoapods
React Native CLI 설치
글로벌하게 설치한다.
$ npm i -g @react-native-community/cli
XCode 및 Android SDK 설치
iOS
XCode 설치하기
Android
Android Studio 설치하기
환경변수 변경 (~/.zprofile or ~/.zshrc)
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
프로젝트 생성
$ npx react-native init MyApp --template react-native-template-typescript
Typescript 적용
$ yarn add --dev typescript @types/react @types/react-native @types/jest @types/react @types/react-test-renderer
또는
$ npm install --save-dev typescript @types/jest @types/react @types/react-native @types/react-test-render
tsconfig.json 수정
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"isolatedModules": false,
"jsx": "react",
"lib": ["es6"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext"
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}
jest.config.js 생성
module.exports = {
preset: 'react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};
js 파일 ts, tsx로 변경
다음 파일들을 ts 및 tsx 파일로 변경한다.
index.js -> index.ts
App.js -> App.tsx
프로젝트 실행
iOS
$ react-native run-ios
Android
$ react-native run-android
릴리즈용 번들 만들기
iOS
$ npx react-native bundle --entry-file index.js --bundle-output ./ios/main.jsbundle --platform ios
Android
$ npx react-native bundle --entry-file index.js --bundle-output ./android/main.jsbundle --platform android
참고:
https://reactnative.dev/docs/environment-setup
https://facebook.github.io/react-native/docs/getting-started
https://facebook.github.io/react-native/docs/typescript
https://github.com/microsoft/TypeScript-React-Native-Starter
'Developments > React Native' 카테고리의 다른 글
iOS 실행시 nw_connection_get_connected_socket 에러 해결 (0) | 2019.11.15 |
---|---|
React.js와 React Native 컴포넌트를 동일한 style 코드로 적용하자 (0) | 2019.11.08 |
pod install이 되지 않을때 (0) | 2019.11.07 |
React-Native + Typescript에서 절대경로 사용하기 (0) | 2019.11.05 |
React Native 필수 추천 패키지 (0) | 2019.09.24 |