React Native中如何为ScrollView的backgroundColor添加动画？

嘿，我来帮你搞定这个困扰！你遇到的不是Bug，而是Animated.ScrollView的contentContainerStyle属性本身并不支持直接绑定动画样式值导致的——虽然普通Animated.View可以直接在style里用插值后的颜色，但ScrollView的内容容器并没有被Animated系统处理，所以它会把插值返回的动画对象当成无效的颜色值，触发你看到的警告，动画自然也跑不起来。

解决方案：用内部Animated.View承载背景动画 #

我们可以把背景动画转移到ScrollView内部的一个Animated.View上，让ScrollView只负责滚动功能，动画交给内部的Animated组件处理。具体修改如下：

1. 调整ScrollView的结构：
   把原来直接放在ScrollView里的Text，嵌套到一个Animated.View中，背景色动画绑定到这个View的style上：

<Animated.ScrollView contentContainerStyle={styles.container}>
  {/* 新增Animated.View承载背景动画 */}
  <Animated.View style={this.getCurrentColorOfBackground()}>
    <Text onPress={this.onPress} style={styles.question}>
      {this.state.question}
    </Text>
  </Animated.View>
</Animated.ScrollView>

2. 更新样式方法：
   给getCurrentColorOfBackground添加布局样式，让内部View占满ScrollView的内容容器：

getCurrentColorOfBackground = () => ({
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: this.backgroundColor.interpolate({
    inputRange: [0, 100],
    outputRange: ["#00aaFF", "#808080"]
  })
});

3. 简化原container样式：
   原来的styles.container只保留滚动相关的基础布局，把对齐、居中的样式移到上面的Animated.View里：

container: {
  flexGrow: 1,
}

这样修改后，背景色动画就会在内部的Animated.View上正常运行，ScrollView也能正常滚动，同时不会再触发颜色格式的警告。

内容的提问来源于stack exchange，提问作者wmsschlck