Animated.Text 更改时的淡入动画

Question

所以我从网络套接字连接接收文本，并将其添加到文本组件。它从灰色开始，然后在 x 时间后变成黑色（应用程序处理文本）。我有下面的代码

    <Text style={styles.confirmedText}>
       {this.state.confirmedText}

       <Animated.Text style={{ fontFamily: "Helvetica Neue", color: "#9b9b9b" }}>
              {this.state.tempText}
       </Animated.Text>
    </Text>

所以这tempText是不断变化的，但我希望当文本从空字符串变为淡入动画时 -> 一些/任何文本。任何想法我怎么能做到这一点？

注意：我知道我的代码没有尝试实现这一点，但我无法使用 Animated.Text 找到任何工作示例。

提前致谢，

编辑：更好的是，如果 temp 的值是 say“some text”，并且添加了一个词，例如“some text plus”，那么添加的单独动画的词“plus”会很棒。虽然看起来很难

Answer 1

首先，您需要像这样设置一个 Animated 值：

this.opacity = new Animated.Value(0)

然后，当您收到文本时，您需要开始动画：

Animated.timing(this.opacity {
    duration: 350, // some number in milliseconds
    toValue: 1, // or whatever final opacity you'd like
  }).start();

最后，您需要在 Animated.Text 组件上插入该值：

style={{
  opacity: this.opacity.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
    extrapolate: 'clamp',
  }),
  ...
}}

希望这可以让你开始！