기본 반응 보기에 레이아웃 강제 적용

기본 반응 보기에 레이아웃 강제 적용

I have a react NativeViewa를 포함하는Text필드, 그리고 나는 그것이 제공하는 데이터에 의존하는 위치 계산을 위해 onLayout 소품을 사용하고 있다.

<View onLayout={this.calculateDimensions}>
  <Text>{this.props.content}</Text>
</View>

이것은 잘 먹히지만, 그 다음이 되는 시나리오는 있다.content동일한 문자 크기의 다른 문자열에 대한 업데이트를 지원하십시오.이로 인해 레이아웃이 변경되지 않고onLayout트리거링하지 않음.

이러한 위치 계산은 매번content업데이트 지원

참고: 구성 요소를 업데이트하는 많은 방법이 있다는 것을 알고 있다.업데이트는 레이아웃과 다르며 슬프게도 트리거되지 않음onLayout.

내용에 따라 고유한 키를 가질 수 있다.구성요소의 주요 속성이 변경될 때마다 그것은 재조정을 강요한다.

방법this.calculateDimensions다시 불러내서 다시 불을 지펴야 한다는 어떤 징후가 필요해.나는 그것의 상태나 메모에 사용하는 것을 추천하고 싶다.

React Hooks의 예를 보여 주겠다.구성 요소 설정 중onLayout, componentLayout에 콜백 사용. onComponentLayout위엄이 있다componentHeight불이 바뀔 때마다 다시 켜지는 것.그래서 구성요소가 있으면 동적으로 변경할 수 있다.키가 빠져 있다.

...
const onComponentLayout = useCallback(({nativeEvent: {layout}}) => {
   !componentHeight && setComponentHeight(layout.height);
}, [componentHeight, setComponentHeight]);
...

return (
...
    <Component
      onLayout={onComponentLayout}
    />
...
)

참조URL: https://stackoverflow.com/questions/51786087/forcing-onlayout-on-react-native-view