React Native动画无法更改背景颜色

Question

使用Animated库，在ScrollView中水平滚动时，我试图更改背景颜色。但是背景颜色没有改变。

const renderMultipleView = () => {
  return ['Page 1', 'Page 2'].map(t => (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'transparent',
        width: widthScreen,
        height: '100%',
      }}>
      <Text style={{color: 'white'}}>{t.toString()}</Text>
    </View>
  ));
};

const App = () => {
  var [scrollX] = useState(new Animated.Value(0));

  var backgroundColorChange = scrollX.interpolate({
    inputRange: [0, widthScreen / 2, widthScreen],
    outputRange: ['#b3006e', '#9a015f', '#380624'],
    extrapolate: 'clamp',
  });

  return (
    <Animated.ScrollView
      horizontal={true}
      onScroll={e => {
        console.log('e: ' + e.nativeEvent.contentOffset.x);
        Animated.event(
          [
            {
              nativeEvent: {contentOffset: {x: scrollX}},
            },
          ],
          {useNativeDriver: true},
        );
      }}
      scrollEventThrottle={16}
      style={[styles.scrollView, {backgroundColor: backgroundColorChange}]}>
      {renderMultipleView()}
    </Animated.ScrollView>
  );
};

这里是结果，我希望它在从左向右滚动并反向滚动时从粉红色变为紫罗兰色，但这只是粉红色。

我是否对动画代码犯了任何错误，或者RN中的动画无法更改背景。我该如何解决。

提前感谢！

Answer 1

原生动画模块不支持背景色。

将onScroll方法更改为，

onScroll={Animated.event(
        [
          {
            nativeEvent: {contentOffset: {x: scrollX}},
          },
        ],
        // {useNativeDriver: true},
      )}