React Native에서 페이지간 이동하는 방법(Navigation)

출처: https://reactnavigation.org/docs/navigating/

 네비게이션을 이용해서 페이지간 이동을 한다.

아이폰에서 상단에 M자 형태로 생긴 시간이 뜨는 상단부를 뭐라고 부를까?

노치 영역이라고 한다.(Notch)

react-native 사용 시 아이폰 notch 영역에 ui를 그리지 않게 하는 방법

 출처: https://www.freecodecamp.org/news/how-to-use-safe-area-context-to-avoid-notches-in-react-native-apps/

safe-area-view를 사용한다.

import {SafeAreaView} from 'react-native'

SafeAreaView를 먼저 적고 안에 코드를 적는다.

 <SafeAreaView>

<View> 

</View>

</SafeAreaView>

 이 방법은 iphone에 적용되고 android에는 적용되지 않는다.

android에까지 적용되는 방법은 출처를 확인해 보자.

UnableToResolveError: Unable to resolve module AccessibilityInfo

 출처: https://github.com/facebook/react-native/issues/14209

node_modules를 지우고 npm install을 한다. 그러면 바로 해결이 안되는데 npm install 시에 문구를 보면 버전이 안 맞다고 추가로 install 하라고 command를 알려준다. 그것까지 하면 해결이 된다.

npm install 시 발생하는 vulnerabilities 에 대해서

출처: https://stackoverflow.com/questions/70418259/why-does-my-npm-install-give-so-many-vulnerabilities#:~:text=If%20you%20are%20following%20an,then%20run%20npm%20i%20again.

 이게 정답인지는 모르겠으나 구글링 해보니 버전 문제라고 한다. 

안 나오게 하려면 package.json에서 @version을 지우고 다시 해보라고 한다.

If you are following an old video, you are likely installing old packages. Therefore it's pretty common to have vulnerabilities. If you want the warnings to disappear, you can try to remove @version in your packages inside package. json and then run npm i again.

React Native UI Components(ReactNative elements,Native Base)

 React Native에서 UI를 그리려고 하니 components 들이 있다는 걸 알았다. 

 React Native Elements 와 Native Base 등 여러가지 종류가 있었다. 

 Tableview를 넣으려고 하는데 막상 Table view는 튜터리얼에서 찾아 볼 수가 없었다.

Tableview를 대신해서 ListView로 원하는 구현이 가능할 지 알아 보든지 

TableView를 다른 방법으로 구현할 수 있는지 알아 봐야겠다.