Question

如果您尝试将功能性（非React类）组件传递给Animated.createAnimatedComponent，则会引发错误提示

无状态功能组件作为createAnimatedComponent的子代无效

来自使用react挂钩的应用程序，基本上我的所有组件都可以正常工作。

有没有一种方法/帮助程序可以将它们传递给createAnimatedComponent而无需将它们包装在Animated.View中，甚至不包装在View中？

这是我要制作动画的组件示例

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

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

}

Answer 1

据我所知，您的选择是：

1）更改为班级组成部分

2）将组件包裹在View中，然后对其进行动画处理

3）使用react-native-animatable（或与此类似的解决方案）：检查 here获取库和参考的组合

4）也许类似于this one的解决方案更适合您。 useRef和useEffect的组合。

Answer 2

此HOC怎么样

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);

将功能组件传递给Animated.createAnimatedComponent

2 个答案:

用法