Reactjs 如何动态创建动画视图并保持其他动画状态？

我想为实时视频创建一个弹幕组件：

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

动画很简单：

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

render（）{
const marginLeft=this.animatedValue.interpolate({
输入范围：[0，1]，
输出范围：[宽度+100，-宽度]
})
const{style}=this.props
返回(
试验
)
}

问题来了：如何添加新的弹幕而不打破旧的动画弹幕

我使用

state

保存弹幕列表，但是如果状态改变，动画应该重新启动，如果弹幕伸出屏幕，它应该从状态列表中删除