リアクションネイティブのテキストの色の変化をアニメ化する

Question

この問題は、今や私を悩ませています。 ユーザーがTouchableをクリックしたときに、テキストのcolorプロパティをアニメーション化したいとします。

これは私がタグを使用しています。

私はこの仕事をするために何が欠けていますか？

これは、これまでのところ、私のコンポーネントである：ここでは

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { Text, View, TouchableWithoutFeedback, LayoutAnimation, Animated } from 'react-native'; 

import { CardSection } from './common'; 
import * as actions from '../actions'; 

class ListItem extends Component { 
    state = { 
    colorAnim: new Animated.Text('#000') 
    }; 

    componentWillUpdate() { 
    LayoutAnimation.easeInEaseOut(); 

    Animated.timing(
     this.state.colorAnim, 
     { 
     toValue: '#47bed1', 
     duration: 5000, 
     } 
    ).start(); 
    } 

    renderDescription() { 
    const { library, expanded } = this.props; 

    if (expanded) { 
     return (
     <CardSection> 
      <Text style={styles.textStyle}> 
      { library.description } 
      </Text> 
     </CardSection> 
    ); 
    } 
    } 

    render() { 
    const { titleStyle } = styles; 
    const { id, title } = this.props.library; 

    return (
     <TouchableWithoutFeedback 
     onPress={() => this.props.selectLibrary(id)} 
     > 
     <View> 
      <CardSection> 
      <Animated.Text 
       style={{ 
       ...titleStyle, 
       color: this.state.colorAnim 
       }} 
      > 
       { title } 
      </Animated.Text> 
      </CardSection> 
      { this.renderDescription() } 
     </View> 
     </TouchableWithoutFeedback> 
    ); 
    } 
} 

const styles = { 
    titleStyle: { 
    fontSize: 18, 
    paddingLeft: 15 
    }, 

    textStyle: { 
    paddingLeft: 18, 
    paddingRight: 5 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    const expanded = state.selectedLibraryId === ownProps.library.id; 

    return { 
    expanded: expanded 
    }; 
}; 

export default connect(mapStateToProps, actions)(ListItem); 

Answer 1

はほぼ同じであるbackgroundColorプロップアニメーションのためのスレッドです： Animating backgroundColor in React Native

基本的に、あなたが直接、カラーの16進文字列を使用することはできませんcolorAnimをnew Animated.Value(1)と宣言してください。 ()の値は、1のような整数でなければなりません。

し、レンダリングの初めに、整数値は、このような実際の色に「補間」されています

var color = this.state.colorAnim.interpolate({ 
    inputRange: [0, 1], 
    outputRange: ['#858a91', '#ffffff'] 
}); 

はその後、このcolorオブジェクトがあなたのAnimated.Text

... 
color: color, 
... 

の color小道具のために使用することができます