React Native/General5 [React Native] 리액트 네이티브에서 커스텀 폰트 일괄 적용하기 보통 앱을 제작할 때에는 fontFamily 스타일 특성을 이용해 기본 폰트가 아닌 커스텀 폰트를 사용한다.이번 글에서는 커스텀 폰트로 fontFamily를 사용하는 방법과 프로젝트에 일괄적으로 폰트를 적용하는 방법을 적어 보겠다.우선 폰트 파일이 필요하다. 폰트 파일은 일반적으로 ttf, otf 확장자를 사용하는데, otf는 안드로이드에서도 적용이 되는 반면 ttf는 ios에서 적용이 안되는 경우가 있으니 가능한 otf를 사용하자.Google Fonts 사이트에서 무료 폰트 파일을 다운로드할 수 있다. 1. src/assets/fonts 폴더에 폰트 파일을 넣는다. 주의할 점은 이 폰트 파일의 이름을 그대로 사용하면 안 된다는 것이다.안드로이드의 경우 폰트 파일을 찾을 때 파일명을 참조하지만 ios의 .. 2024. 7. 30. [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] Android, iOS 에뮬레이터(emulator), 실기기 build (USB debugging) M3 Pro Macbook에서 React Native Setting을 마치고 Build까지 성공한 지난 글에 이어, 구체적으로 Android와 iOS가, 또 가상기기(emulator)와 실기기에서의 build 방법이 어떻게 다른지 적어보려 한다. 1. Android 1) 가상기기 (Emulator) Android Studio의 기기 관리자 (Device Emulator)에서 원하는 가상기기 전원을 켠다. 가상 기기를 생성하는 방법은 이전 글에 나와 있다. [React Native] M3 Macbook Pro에 리액트 네이티브(React-Native-Cli) 초기 세팅하기 (개발 환경 구축부터 Android, iOS 기기 Build까지) [React Native] M3 Macbook Pro에 리액트 네이티.. 2024. 4. 16. [React Native] M3 Macbook Pro에 리액트 네이티브(React-Native-Cli) 초기 세팅하기 (개발 환경 구축부터 Android, iOS 기기 Build까지) 설레는 마음으로 개봉한 M3 맥북 프로.개발의 세계에서 가장 어려운 게 세팅이라 했건만 인텔 아이맥 한번 세팅해 본 경험만으로 자만감이 차올랐던지, 신중함 없이 신나게 세팅하다 실패하여 구매한 지 하루만에 결국 포맷을 하게 되었다.검색해 보니 아직 M3 Macbook Pro의 React Native Cli Setting 방법이 없길래 다른 사용자들이 필자처럼 삽질하지 않기를 바라는 마음에 포맷 후 세팅 기록을 정리했다.부디 이 긴 여정을 끝까지 함께하길 바라며 버전 정보부터 정리한다.Version InfoSystem: OS: macOS 14.3 CPU: (11) arm64 Apple M3 Pro Memory: 78.47 MB / 18.00 GB Shell: version: "5.9" p.. 2024. 4. 16. 이전 1 다음
