react-native settings

bclef25·2019년 12월 29일
0

init

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

tsconfig.json (프로젝트 root디렉토리에 생성)

{
  	"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"
  ]
}

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['babel-plugin-root-import', {rootPathPrefix: '~', rootPathSuffix: 'src'}],
  ],
};

Navigation

리액트 네이티브는 기본적으로 내비게이션 기능을 지원하지 않는다. 리액트 네이티브에서 네이티브 기능을 구현하기 위해서는 다음과 같은 오픈소스 라이브러리를 사용한다.

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

AsyncStorage 설치 및 설정

npm install --save @react-native-community/async-storage

react-native link @react-native-community/async-storage

ios

프로젝트 내부 ios 폴더로 진입후 pod를 인스톨한다.

cd ios 
pod install 

react native debugger

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"

generator-rn-toolbox


npm install -g yo generator-rn-toolbox

imagemagick

brew install imagemagick
profile
프론트 개발자

0개의 댓글