반응형 android15 [React Native] Flatlist에 onScrollToIndexFailed 설정하기 React Native에서 Flatlist를 사용하다 보면 scrollToIndex 함수를 설정할 일이 많다.그러나 flatlist에 들어간 데이터를 로드하는 데 딜레이가 생길 경우,scrollToIndex 함수가 제대로 작동하지 않아 자동 스크롤이 자연스럽지 못하거나 아예 중간에 끊기는 경우가 많다.이때 사용할 수 있는 onScrollToIndexFailed 함수를 설명하고자 한다. 원리는 간단하다.scrollToIndex 함수가 스크롤에 실패하는 경우 500ms (설정 가능) 정도의 짧은 시간 동안 기다렸다가 다시 스크롤하게 하는 것이다. const flatlistRef = useRef(null);... { const wait = new Promise(resolve => setTimeout(.. 2024. 7. 8. [React Native] 리액트 네이티브에서 가로모드/세로모드 제한/허용하기 모바일 어플리케이션을 제작할 때 가로 모드와 세로 모드를 모두 고려하여 제작하면 참 좋겠지만, 어쩔 수 없이 가로모드/세로모드 중 한 가지로 제한해야 하는 경우가 있다. 각 상태의 이름은 다음과 같다. 가로모드와 세로모드를 제한/허용하는 것은 모듈을 따로 설치할 필요 없이, 각 OS별로 설정만 해주면 된다. - Androidandroid/app/src/main/AndroidMenifest.xml 파일을 열고 다음 위치에 코드를 추가한다. - iOSios/projectName/Info.plist 파일을 열고 다음 위치에 코드를 추가한다.아마 default로 여러 줄이 있을 텐데 허용하고 .. 2024. 7. 5. [React Native] 리액트 네이티브에서 NetInfo로 인터넷 연결 상태 확인하기 (RN 0.73) 모바일 어플리케이션에서 인터넷 연결 상태를 지속적으로 확인하는 일은 꽤 중요하다.많은 경우, 특히 서버와 인터넷을 통해 통신하는 경우 인터넷 상태가 좋지 않으면 속도가 매우 느려지거나 결국 닿지 않는데, 사용자에게 이것이 어플리케이션 때문이 아니라 네트워크 때문인 것을 알려야 하기 때문이다. @react-native-community/netinfo 모듈을 이용하면 쉽게 구현할 수 있다. npm i @react-native-community/netinfocd iOSpod install 이 모듈은 사용법이 매우 간단하다. 컴포넌트, 즉 앱이 마운트될 때 구독하고, 마운트 해제될 때 구독을 취소하면 된다. 그런데 심지어 더 간단한 훅을 사용할 수도 있다. import {useNetInfo} from '@rea.. 2024. 7. 5. [React Native] 리액트 네이티브에서 Lottie 사용하여 애니메이션 넣기 (RN 0.73) Lottie는 에어비앤비에서 제공하는 라이브러리로, 많은 사람들이 공유한 애니메이션을 무료로 이용할 수 있고 커스텀까지 가능하다.무게가 큰 gif 파일에 비해 가벼운 json 파일만으로 웹, 앱 등 다양한 곳에 멋진 애니메이션을 넣을 수 있다.하지만 react native 0.73의 최신 버전을 활용하는 필자는 호환되는 버전을 찾는 데 어려움을 느꼈기 때문에 사용 방법을 정리해 보려 한다. 1. 설치로띠를 이용하기 위해서는 2가지의 모듈을 설치해야 한다. 사실상 버전 정보 때문에 이 글을 쓰는 것과 다름없다. 버전이 맞지 않으면 오류가 난다...어떤 오류인지는 밑에서 설명하겠다. 아래 command를 통해 두 모듈을 설치한다.npm i --save lottie-react-native@6.7.2npm i .. 2024. 4. 17. [React Native/Error] Invariant Violation: Tried to register two views with the same name : npm dedupe Invariant Violation: Tried to register two views with the same name LottieAnimationView, js engine: hermes 외부 라이브러리 사용시 중복된 패키지로 인해 생기는 오류이다. 다음 command를 통해 중복된 패키지를 정리해주면 해결됨 + 용량도 줄여준다고 함 npm dedupe 2024. 4. 17. [React Native/Error] TypeError: cli.init is not a function : react-native-cli 전역 설치X TypeError: cli.init is not a function npx install -g react-native-cli 위 command를 통해 프로젝트를 시작하기 이전 react-native-cli를 전역으로 설치하였다면 이러한 오류가 날 수 있다. 공식문서에서는 react-native-cli를 global로 설치하는 것을 권장하지 않는다고 한다. 아래 command를 통해 전역으로 설치한 모듈을 삭제한다. npm uninstall -g react-native-cli 그리고 공식문서에 나와 있는 아래 command로 프로젝트를 시작하면 좋겠다. npx react-native init projectName 2024. 4. 16. 이전 1 2 3 다음 반응형
