npx react-native init [app-name]
해당 디렉토리로 이동
npm install --save styled-components
&&
npm install --save-dev typescript @types/react @types/react-native @types/styled-components babel-plugin-root-import
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["ES6"],
"moduleResolution": "Node",
"noEmit": true,
"strict": true,
"target": "esnext",
"baseUrl": "./src",
"paths": {"~/*": ["*"]}
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
['babel-plugin-root-import', {rootPathPrefix: '~', rootPathSuffix: 'src'}],
],
};
리액트 네이티브는 기본적으로 내비게이션 기능을 지원하지 않는다. 리액트 네이티브에서 네이티브 기능을 구현하기 위해서는 다음과 같은 오픈소스 라이브러리를 사용한다.
react-native-navigation: https://github.com/wix/react-native-navigation
react-navigation: https://github.com/react-navigation/react-navigation
native-navigation: https://github.com/airbnb/native-navigation
react-native-router: https://github.com/t4t5/react-native-router
react-native-router-flux: https://github.com/aksonov/react-native-router-flux
추천
react-navigation: https://github.com/react-navigation/react-navigation
react-navigation install
npm install --save react-navigation react-native-gesture-handler react-native-reanimated
cd ios
pod install
npm install --save @react-native-community/async-storage
react-native link @react-native-community/async-storage
프로젝트 내부 ios 폴더로 진입후 pod를 인스톨한다.
cd ios
pod install
brew update && brew cask install react-native-debugger
git link
https://github.com/jhen0409/react-native-debugger
사용
open "rndebugger://set-debugger-loc?host=localhost&port=8081"
npm install -g yo generator-rn-toolbox
brew install imagemagick