TIL

<TIL> module 설정 - Trello(2)

버퀴 2020. 3. 14. 20:52

6버전 이전에는 install을 하면 " react native link" 명령어를 사용하여 연결해야 했지만 6버전 이후부터는 link를 안해줘도 자동으로 link가 된다!

 

1. 사용 해야 할 router moudle 

npm install react-native-gesture-handler
npm install react-native-safe-area-context
npm install @react-native-community/masked-view
npm install @react-navigation/drawer
npm install @react-navigation/bottom-tabs
npm install @react-navigation/native
npm install @react-navigation/stack
  • @react-navigation/stack :  stack navigation을 만들때 사용 된다.
  • @react-navigation/native :  navigation을 프로젝트에 적용할 때 사용된다.
  • @react-navigation/bottom-tabs :  하단에 bottom-navigation을 만든다.
  • @react-navigation/drawer : drawer-navigation을 만들 때 사용된다.
  • react-native-safe-area-context : 화면과 겹쳐지는 부분을 겹쳐지지 않게 처리
  • react-native-gesture-handler : 사용자의 액션에 따라 반응 

react-native-gesture-handle 공식 홈페이지

https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html

 

Getting Started · React Native Gesture Handler

Gesture Handler aims to replace React Native's built in touch system called [Gesture Responder System](http://facebook.github.io/react-native/docs/gesture-responder-system.html).

software-mansion.github.io

2. UI 관련

npm install react-native-vector-icons
npm install lottie-react-native
npm install react-native-swiper
npm install react-native-check
등...

 

3. eslint 규칙 설정

npm install --save-dev babel-eslint eslint-plugin-react eslint-plugin-react-native

위에를 일단 설치해줍니다.

저 같은 경우는 위와 같이 설정해주었습니다.

그러면 eslintrc.js 파일에 여러가지가 추가된 것을 확인 할 수 있습니다.

여기에서 env 항목에 jest를 true로 설정하고 추가하고

'env': {
    'browser': true,
    'es6': true,
     추가 -> 'jest' : true
  },

plugins 배열에 react-native를 추가하면 됩니다.

'plugins': [
    'react',
    추가 -> 'react-native'
  ],