我有一个Component类,但是我得到这个`createAnimatedComponent`不支持无状态功能组件;使用类组件代替

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我有一个Component类,但是我得到这个`createAnimatedComponent`不支持无状态功能组件;使用类组件代替相关的知识,希望对你有一定的参考价值。

[您好,我目前正在应用中尝试用动画实现屏幕,但是我收到此消息,createAnimatedComponent不支持无状态功能组件;改用类组件。但是我的组件是一个类!

import React from "react";
import styled from "styled-components/native";
import { Animated } from "react-native";

class Menu extends React.Component {
  state = {
    top: new Animated.Value(900),
  };

  componentDidMount() {
    Animated.spring(this.state.top, {
      toValue: 0,
    }).start();
  }
  render() {
    return (
      <AnimatedContainer style={{ top: this.state.top }}>
        <Cover />
        <Content />
      </AnimatedContainer>
    );
  }
}

export default Menu;

const Container = styled.View`
  position: absolute;
  background: white;
  width: 100%;
  height: 100%;
  z-index: 100;
`;

  const AnimatedContainer = Animated.createAnimatedComponent(Container);

const Cover = styled.View`
  height: 142px;
  background: black;
`;

const Content = styled.View`
  height: 900px;
  background: #f0f3f5;
`;

enter image description here

答案
export const AnimatedContainer = Animated.createAnimatedComponent(Container);

[Menu是一个类,是的,但是Container不是,这就是您要传递给createAnimatedComponent的内容。

以上是关于我有一个Component类,但是我得到这个`createAnimatedComponent`不支持无状态功能组件;使用类组件代替的主要内容,如果未能解决你的问题,请参考以下文章

如何将C ++类设置为qml中的Item?

Angular 6 - 从另一个组件调用模态窗口组件

从 @ComponentScan 中排除 @Component

如何为具有spring存储库代码的@Component类编写集成测试?

获取 app.component 中属性的值

从另一个泛型类添加泛型方法约束