OGeek|极客世界-中国程序员成长平台

标题: javascript - 多个 React-Native 组件的可重用动画 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 19:41
标题: javascript - 多个 React-Native 组件的可重用动画

我正在尝试为一系列组件创建默认的 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>
    )
  }

---

Best Answer-推荐答案

所以，在多次尝试和失败之后，我从 Gosha Arinich 那里找到了这个很好的例子。我希望这将帮助 future 的用户解决我遇到的同样问题。不过，谢谢@Cruiser。

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

关于javascript - 多个 React-Native 组件的可重用动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48523969/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4