기능 구성 요소를 애니메이션으로 전달.애니메이션 구성 요소 생성

기능 구성 요소를 애니메이션으로 전달.애니메이션 구성 요소 생성

기능(비반응 클래스) 구성 요소를 에 전달하려는 경우Animated.createAnimatedComponent라고 하는 오류를 던진다.

상태 비저장 기능 구성 요소가 createAnimatedComponent의 하위 기능으로 잘못됨

리액션 훅을 사용하는 앱에서 나온 내 모든 구성요소는 기본적으로 기능한다.

이러한 정보를 에 전달할 수 있는 방법이 있는가?createAnimatedComponent그것들을 싸지 않고Animated.View또는 심지어 정의로운View?

다음은 애니메이션이 가능한 구성 요소의 예입니다.

function MyComponent({ someProp }) {
  const [counter, setCounter] = useState(0);

  return (
    <View>
      <Text>{counter}</Text>
    </View>
  );

}

이 HORK는 어떠세요?

export function withAnimated(
  WrappedComponent: React.ComponentType<any>,
): ComponentType {
  const displayName =
    WrappedComponent.displayName || WrappedComponent.name || 'Component';

  class WithAnimated extends React.Component {
    static displayName = `WithAnimated(${displayName})`;

    render(): React.ReactNode {
      return <WrappedComponent {...this.props} />;
    }
  }

  return Animated.createAnimatedComponent(WithAnimated);
}

사용법

export const AnimatedGradientButton = withAnimated(GradientButton);

내가 알 수 있는 한, 당신의 선택은 다음과 같다.

1) 클래스 컴포넌트로 변경

2) 구성 요소를 a로 포장View그리고 나서 당신이 애니메이션을 만들게 되는 것

3) 사용react-native-animatable(또는 이와 유사한 솔루션): 여기에서 라이브러리 및 참조 자료의 조합을 확인하십시오.

4) 아마도 이것과 비슷한 해결책이 당신에게 더 잘 어울릴 것이다.의 조합useRef그리고useEffect.

참조URL: https://stackoverflow.com/questions/57359389/pass-functional-component-to-animated-createanimatedcomponent