React Native 动画文本列表

Question

我有一系列文本，我想在空白屏幕上闪现，一个接一个地带有动画。就像是：

state = {
  meditations: ["Take a deep breath", "embrace this feeling", "breath 
             deeply", ...]
}

我想一次只显示一根字符串，并设置它们的不透明度动画。因此，一个字符串淡入并淡出，然后是下一个字符串，依此类推。

我对原生反应很陌生，并且对如何解决这个问题感到很困惑。请问，我该如何解决这个问题，我已经阅读了文档，但仍然不清楚如何解决。

下面是我尝试过的，我从文档中修改了它，但它立即显示了所有内容。我仍在尝试如何让它们一个接一个地动画化，一次只显示一个。提前感谢您的帮助。

state = {
  meditations: ["Take a deep breath", "embrace this feeling", "breath 
             deeply", ...]
}

Answer 1

经过一番努力后，我能够react-native-animatable像这样解决它：

import React from "react";
import {
  View,
  Text,
  Animated
} from "react-native";


import * as Animatable from 'react-native-animatable';


class VideoScreen extends React.Component {

  state = {
    meditations: ["Take a deep breath", "embrace this feeling", "breath 
         deeply"],
    index: 0
  };

  render() {
    const { meditations, index } = this.state;
    return (
      <View style={{flex: 1}}>
        <Animatable.Text
          key={index}
          animation={'fadeIn'}
          iterationCount={2}
          direction="alternate"
          duration={2000}
          onAnimationEnd={() => {
            if (this.state.index < this.state.meditations.length - 1) {
              this.setState({ index: this.state.index + 1});
            }
          }}
          style={{
            position: "absolute",
            left: 0, right: 0,
            bottom: 40
          }}>
          {meditations[index]}
        </Animatable.Text>
      </View>
    );
  }
}

export default VideoScreen;