[React Native/TS] onLyaout 이벤트
3414 단어 react nativereact native
- 모든 R/N 코어 컴포넌트는 onLayout 이벤트 속성을 제공
┗ 또한 LayoutChangeEvent 타입을 제공
Type
import type {LayoutChangeEvent} from 'react-native'
- 위의 타입은 onLayout 이벤트 속성에 설정하는 이벤트 처리기의 입력 배개변수 타입
Type use
const onLayout = (e: LayoutChangeEvent) => {};
LayoutRectangle 타입 layout 얻기
export interface LayoutChangeEvent {
nativeEvent: {
layout: LayoutRectangle;
}
}
컴포넌트의 위치와 크기 알아내기
const onLayout = (e: LayoutChangeEvent) => {
const {layout} = e.nativeEvent; // layout 추출
console.log('onLayout', layout); // layout 출력
}
<View onLayout={onLayout} /> // layout 부여
useLayout 커스텀 hook 제작
- 반환 형태 배열로 설정 : TS에서 반환 타입 설정안하면 오류 생김
- useState의 초기 값으로 LayoutRectangle 형태 설정
- onLayout 함수 useCallback을 통해 최적화
┗ layout 을 e.nativeEvent로 부터 추출 - 배열 return 설정
Author And Source
이 문제에 관하여([React Native/TS] onLyaout 이벤트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ww8007/RN-onLyaout-이벤트저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)