はネイティブアニメーションネイティブドライバサポートカラー/のbackgroundColorを反応させていますか？

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, 
       } 
      )}  
      >  

が、私はこのエラーを取得しています：

ReactNative 0.44.0

に従って使用して

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

彼らが言うのでthis blog post に動作するようになっています：

Not everything you can do with Animated is currently supported in Native Animated. The main limitation is that you can only animate non-layout properties, things like transform, opacity and backgroundColor will work but flexbox and position properties won't.

しかし、私はサポートされているコード内のスタイルのためのホワイトリストがある参照してください。link to relevant code 非常に限られたホワイトリストがある：色が含まれていません/ backgroundColorの

誰も助けることができる

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

私はここにいる - それはサポートされるべきかどうか？

Answer 1

エラーがネイティブドライバ（即ちuseNativeDriver: true）を使用しながらcolorを変更しようとしているからです。

colorおよびbackgroundColorは、現時点ではネイティブドライバでサポートされていません（https://github.com/facebook/react-native/issues/14178）。

あなたはネイティブドライバを使用し続けたい場合は、例えば、テキストの色を変更するには回避策として、不透明度を使用して試みることができます互いの上に異なる色および異なる開始不透明度を有する2つのテキスト要素を配置することによって、

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> 

    ... 

今日は同じ問題を抱えていたと」なかったの：開始時に目に見えるだ要素が終了（またはその逆）に見えないように、各要素の不透明度を変更するにはonScrollイベントを使用tはパフォーマンス上の理由からuseNativeDriver: falseを設定します。しかし、不透明度を使用することは私のために大丈夫でした。お役に立てれば！

Answer 2

メイクuseNativeDriver:falsecolorプロパティは期待どおりに機能します。

ネイティブドライバを使用しているか使用していない2Dアニメーションの違いはありません。