지니 코딩일기

react-navigation ver.6 에서 다음 방법으로 구할 수 있다. import { useHeaderHeight } from '@react-navigation/elements'; // ... const headerHeight = useHeaderHeight();

요약 로딩바 공식 문서 https://reactnative.dev/docs/activityindicator ActivityIndicator · React Native Displays a circular loading indicator. reactnative.dev 예시 HTML 삽입 미리보기할 수 없는 소스

요약 iOS에서 노치, 화면 테두리(radius)에 의해 가려지는 부분에 자동으로 padding을 주어 가려짐을 방지한다 공식 문서 https://reactnative.dev/docs/safeareaview SafeAreaView · React Native The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later. reactnative.dev 예시 HTML 삽입 미리보기할 수 없는 소스

요약 TextInput(키보드 입력창) 클릭 시 키보드가 올라올 때 화면이 자동으로 위로 올라갈 수 있도록 하는 역할 공식 문서 https://reactnative.dev/docs/keyboardavoidingview KeyboardAvoidingView · React Native It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height. reactnative.dev 예시 HTM..

요약 - 컴포넌트를 React.memo()로 wrapping하면 렌더링될 때 결과를 메모이징(Memoizing)함 - 렌더링될 때 이전 렌더링과 props가 같다면 React는 메모이징(Memoizing)된 내용을 재사용함 - 같은 실행을 반복하지 않게 함으로써 성능 향상을 누릴 수 있음 - 이 메서드는 오직 성능 최적화를 위하여 사용됩니다. 렌더링을 “방지”하기 위하여 사용하지 마세요. 버그를 만들 수 있음!! 예시 const MyComponent = React.memo(function MyComponent(props) { /* props를 사용하여 렌더링 */ }); 설명 - 고차 컴포넌트 (Higher Order Component) - 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, R..

요약 아무 반응 없이 클릭하기! (클릭 시 아무 반응 없음) 공식 문서 https://reactnative.dev/docs/touchablewithoutfeedback TouchableWithoutFeedback · React Native If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. reactnative.dev 예시 HTML 삽입 미리보기할 수 없는 소스

요약 리스트 생성 data에 데이터를 넣으면 renderItem 형태로 된 item의 리스트를 만들어줌 *section 구분이 필요하다면 사용! 설명 아래 사항들을 모두 지원함 Fully cross-platform. Optional horizontal mode. Configurable viewability callbacks. Header support. Footer support. Separator support. Pull to Refresh. Scroll loading. ScrollToIndex support. Multiple column support. 공식 문서 https://reactnative.dev/docs/flatlist FlatList · React Native A performant in..

node, VS code가 준비되어 있다면 npx create-react-app 파일명 를 통해 간단하게 생성 가능