2019-07-07 TIL

2019-07-07

React Native 찌끄레기

udemy 강의 보며 적은 것

third-party library 붙이기

javascript로 구동되는 것이 아니면서, 리액트 네이티브에서 사용하도록 제작된 라이브리들은 각 라이브러리에 설명을 따라 iOS, Android에 각각 dependency 추가하는 과정이 필요하다.

안해본 상태에서는 설명만 보면 어쩌라는거지 싶지만, udemy 강의 한 두번 따라 해보면 그런건 없어지는 것 같다. (xcode에서 어딜 어떻게 조작해야 하는지 조차 감이 없기 때문. 안드로이드는 그냥 vscode나 ide에서 코드 혹은 텍스트 레벨의 수정을 해주면 된다.)

cocoapod이나 gradle 사용하는 방법은 아직 안해봄.

StyleSheet API

StyleSheet 를 사용하면 JS object 사용하는 것 대비 다음 장점이 있다

  1. 선언한 스타일을 validate해준다
  2. native code에 더 효율적으로 보낸다 (<- 어떻게?)

결론: 오브젝트를 박아넣는 것 보다는 StyleSheet.create({ .. }) 해서 만든걸 사용하는것이 좋다. (in-line으로 넣을때도 사용 가능할 것)

Dimensions API

portrait과 landscape 모드에 대해 반응형으로 style을 만드는 것도 고려하면 좋다.

  • Dimensions API를 사용해 해상도 정보를 얻고, Dimensions API에서 지원하는 이벤트 리스너를 이용해 해상도가 변하는 것에 대응하도록 한다.
  • 달아준 리스너는 unmount 시점에 제거해주도록 하자.
static addEventListener(type, handler)

이벤트 type은 현재 ‘change’만 지원.

handler 함수는 인자로 windowscreen을 속성으로 갖는 오브젝트가 전달된다. 그 값은 Dimensions.get('window')Dimensions.get('screen')이 리턴하는 값과 같다.


Minchang Kim
Minchang Kim
웹/앱 개발자 김민창입니다! 좋은 하루 되세요!