React Native 动画无法改变背景颜色答案

【问题标题】：React Native animation can't change background colorReact Native 动画无法改变背景颜色
【发布时间】：2020-05-23 10:34:33
【问题描述】：

使用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 中的动画无法更改背景。我该如何解决这个问题。

提前致谢！

【问题讨论】：

标签： react-native animation horizontalscrollview

【解决方案1】：

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

将您的 onScroll 方法更改为，

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

【讨论】：