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

Posted 2021-05-07

[您好，我目前正在应用中尝试用动画实现屏幕，但是我收到此消息，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;
`;

答案

export const AnimatedContainer = Animated.createAnimatedComponent(Container);

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