reactjs - 如何动态创建动画视图并保持其他动画状态反应？

Question

我想为直播视频创建一个弹幕组件：

render() {
  return (
    <View>
      <Video />
      <BarrageLayer ref={r => this.barrageLayer = r} />
    </View>
  )
}

Barrage可以从右到左显示多个动画文本，因此它提供了一个功能：

onNewMessageReceive(msg) {
  this.barrageLayer.show(msg)
}

动画很简单：

  render() {
    const marginLeft = this.animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [width + 100, -width]
    })
    const { style } = this.props
    return (
      <View style={[s.container, style]}>
        <Animated.Text style={[s.color, { marginLeft }]}>TEST</Animated.Text>
      </View>
    )
  }

问题来了：如何在不打破旧动画弹幕的情况下添加新弹幕？

我state用来保存弹幕列表，但如果状态发生变化，动画应该重新开始，如果弹幕伸出屏幕，它应该从状态列表中删除。

标签： reactjsreact-nativesetstate