Javascript 用于多个本机组件的可重用动画

我正在尝试为一系列组件创建默认偏移动画。这些组件从不同的外部文件加载到App.js中。目前，我正在每个组件中使用以下动画设置，但我希望找到一种简单（不要重复）的方法来实现它。如何仅设置一个动画并避免重复？是否需要在App.js中声明动画，或者我也可以在外部文件中创建动画

谁能给我指出正确的方向吗？提前谢谢你

组件设置

import React, { Component } from 'react';
import {
  Animated,
  View,
  Text,
  StyleSheet,
  DeviceEventEmitter
} from 'react-native';

// Custom **********************************************************************
import styles from '../styles'

export class BlueberryComp extends Component {
  constructor(props) {
    super(props)
    this.state = {
      offsetY: new Animated.Value(0),
      fadeIn: new Animated.Value(0)
    }
  }

  componentDidMount() {
    Animated.parallel([
      Animated.timing(
        this.state.offsetY,
        {
          toValue: -100,
          duration: 1000,
        }),
      Animated.timing(
        this.state.fadeIn,
        {
          toValue: 1,
          duration: 1000,
        }
      )
    ]).start();
  }


  render() {
    let { offsetY, fadeIn } = this.state;

    return (
      <Animated.View style={{ opacity: fadeIn, transform: [{ translateY: offsetY }] }}>
        <Text style={styles.h1}>{this.props.name}</Text>
      </Animated.View>
    );
  }
}

import React，{Component}来自'React'；
进口{
有生气的
看法
文本，
样式表，
设备事件发射器
}从“反应本机”；
//习俗**********************************************************************
从“../styles”导入样式
导出类BlueberryComp扩展组件{
建造师（道具）{
超级（道具）
此.state={
offsetY:新的动画.Value（0），
fadeIn:新动画。值（0）
}
}
componentDidMount（）{
平行动画([
时间(
这个，state，offsetY，
{
toValue:-100，
持续时间：1000，
}),
时间(
这个州，法登，
{
toValue:1，
持续时间：1000，
}
)
]).start（）；
}
render（）{
设{offsetY，fadeIn}=this.state；
返回(
{this.props.name}
);
}
}

在这里，我使用renderIf将每个组件加载到渲染视图中

  render() {
    const { isIce, isMint, isBlueberry } = this.state
    return (
        <View style={styles.container}>
            {renderIf(isIce, <IceComp name={this.state.name} />)}
            {renderIf(isMint, <MintComp name={this.state.name} />)}
            {renderIf(isBlueberry, <BlueberryComp name={this.state.name} />)}
        </View>
    )
  }

render（）{
const{isIce，isMint，isBlueberry}=this.state
返回(
{renderIf（isIce，）}
{renderIf（isMint，）}
{renderIf（蓝莓，）}
)
}

因此，在多次尝试和失败后，我从Gosha Arinich那里找到了这个很好的例子。我希望这将有助于未来的用户解决与我相同的问题。不过，谢谢你，巡洋舰

在React Native中设置外观和消失动画

---

为什么不制作一个自定义的可设置动画的组件？该组件可以使用显示内容的道具，以及更改默认动画的选项。@Cruiser，我还没有尝试过。我是一个新手，不知道这种成分。你知道我在哪里可以找到一个简单的例子吗？感谢您的回复。它只是您创建的一个组件，就像您的BlueberryComp组件一样。你可以使用react native的动画组件，通过道具传递你想要的动画内容。好了，现在看看文档。让我看看我是否能做到。你的蓝莓组件实际上非常接近。快速修复方法是将其重新命名为类似AnimatableComponent的名称。然后使用调用它（在本例中不需要renderIf），然后如果要更改动画，可以添加不同的选项：animationOpts={offset:0，fadein:0}