javascript - 多个 React-Native 组件的可重用动画

Question

我正在尝试为一系列组件创建默认的 offsetY 动画。这些组件从不同的外部文件加载到 App.js 中。目前我在每个组件中使用以下动画设置，但我想找到一种 DRY(不要重复自己)的方式来实现它。如何只设置一个动画并避免重复？动画需要在 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>
    );
  }
}

App.js，这里我使用 renderIf 将每个组件加载到渲染 View 中。

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

Answer 1

因此，在多次尝试和失败之后，我从 Gosha Arinich 找到了这个很好的例子。我希望这将帮助 future 的用户解决我遇到的同样问题。尽管如此，还是谢谢你@Cruiser。

React Native 中的动画外观和消失 https://goshakkk.name/react-native-animated-appearance-disappearance/