将功能组件传递给 Animated.createAnimatedComponent

Question

如果你尝试将函数(非反应类(组件传递给Animated.createAnimatedComponent它会抛出一个错误，指出

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

来自一个使用 react 钩子的应用程序，基本上我的所有组件都是功能性的。

有没有一种方法/助手可以允许将它们传递给createAnimatedComponent，而无需将它们包装在Animated.View中，甚至只是View？

这是我想使动画化的组件示例

function MyComponent({ someProp }) {
  const [counter, setCounter] = useState(0);
  return (
    <View>
      <Text>{counter}</Text>
    </View>
  );
}

Answer 1

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

Answer 2

据我所知，您的选择是：

1( 更改类组件

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

3( 使用react-native-animatable(或与此类似的解决方案(：检查 这里是库和参考的组合

4(也许与此类似的解决方案更适合您。useRef和useEffect的组合。