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

根据this blog post 它应该起作用，因为他们说：

目前，Native Animated不支持您使用Animated可以执行的所有操作。主要限制是您只能为非布局属性设置动画，例如转换，不透明度和backgroundColor都可以使用，但是flexbox和position属性不会被激活。

但我发现代码中的样式有一个白名单支持：link to relevant code 白名单非常有限：

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

不包括color / backgroundColor

任何人都可以帮助我 - 这应该得到支持吗？

Answer 1

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

目前本地驱动程序（https://github.com/facebook/react-native/issues/14178）不支持

color和backgroundColor。

如果您想继续使用本机驱动程序，可以尝试使用不透明度作为解决方法来改变文本的颜色，例如通过将两个具有不同颜色和不同起始不透明度的文本元素放在彼此的顶部。然后使用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。但使用不透明度对我来说是一个好的解决方法。希望这有帮助！

Answer 2

生成useNativeDriver:false，然后color属性将按预期工作。

我没有发现使用或不使用本机驱动程序的2D动画有任何区别。

Answer 3

此错误来自React Native lib中的validateTransform函数。您可以检查NativeAnimatedHelper中的TRANSFORM_WHITELIST来获取原生动画模块支持的属性。

当前支持这些道具

const TRANSFORM_WHITELIST = {
  translateX: true,
  translateY: true,
  scale: true,
  scaleX: true,
  scaleY: true,
  rotate: true,
  rotateX: true,
  rotateY: true,
  rotateZ: true,
  perspective: true,
};

当前，color不在TRANSFORM_WHITELIST配置中。您不能使用本机动画驱动程序来支持color / backgroundColor。

Answer 4

您只需看react-native-animated-colors即可平滑设置背景颜色的动画。

是否反应原生动画本机驱动程序支持color / backgroundColor？

4 个答案: