反应原生动画原生驱动程序是否支持颜色/背景颜色？

Question

我正在尝试为文本的颜色设置动画，如下所示：

const animateTest = scrollY.interpolate({
                                    inputRange: [0, 100],
                                    outputRange: ['rgba(255,0,0,1)', 'rgba(0,255,0,1)']                                    
                                });



      return (<View>      
    <Animated.Text style={{ position:'absolute',                                          
                              color: animateTest
                          }} >blah blah blah</Animated.Text>
    <Animated.ScrollView
              scrollEventThrottle={16}                
              onScroll={Animated.event(
                [
                    {
                        nativeEvent: {contentOffset: {y: scrollY}},
                    },
                ],
                {
                    useNativeDriver: true,
                }
            )}      
          >       

但我收到此错误：

Style property 'color' is not supported by native animated module

使用 ReactNative 0.44.0

根据 这篇博客文章， 它应该可以工作，因为他们说：

Native Animated 目前并非支持您使用 Animated 执行的所有操作。主要限制是您只能为非布局属性设置动画，transform、opacity 和 backgroundColor 之类的东西会起作用，但 flexbox 和 position 属性不会。

但我看到支持的代码中的样式有一个白名单：链接到相关代码 有一个非常有限的白名单：

const STYLES_WHITELIST = {
  opacity: true,
  transform: true,
  /* legacy android transform properties */
  scaleX: true,
  scaleY: true,
  translateX: true,
  translateY: true,
};

不包括颜色/背景颜色

任何人都可以在这里帮助我-是否应该支持它？

Answer 1

错误来自color在使用本机驱动程序（即useNativeDriver: true）时尝试更改。

color并且backgroundColor目前不受本机驱动程序支持（https://github.com/facebook/react-native/issues/14178）。

如果您想继续使用本机驱动程序，您可以尝试使用不透明度作为一种变通方法来更改文本的颜色，例如将两个具有不同颜色和不同起始不透明度的文本元素放在一起。然后使用该onScroll事件更改每个元素的不透明度，以便开始时可见的元素在末尾不可见（反之亦然）：

    const redTextOpacity = scrollY.interpolate({
      inputRange: [0, 100],
      outputRange: [1, 0],
      extrapolate: 'clamp',
    });
    const greenTextOpacity = scrollY.interpolate({
      inputRange: [0, 100],
      outputRange: [0, 1],
      extrapolate: 'clamp',
    });

    return (
      <View>
          <Animated.Text style={{
            position: 'absolute',
            opacity: redTextOpacity,
            color: 'rgba(255,0,0,1)',
          }} >blah blah blah</Animated.Text>
          <Animated.Text style={{
            position: 'absolute',
            opacity: greenTextOpacity,
            color: 'rgba(0,255,0,1)',
          }} >blah blah blah</Animated.Text>

  ...

我今天遇到了同样的问题，useNativeDriver: false出于性能原因不想设置。但是使用不透明度对我来说是一个不错的解决方法。希望这可以帮助！