react-native - 在 React-Native 中动画文本颜色变化

Question

这个问题已经困扰我一段时间了，我被卡住了。
当用户单击 Touchable 时，我想为我的文本的颜色属性设置动画。

为此，我使用了一个标签。

我缺少什么来完成这项工作？

到目前为止，这是我的组件:

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 的主题 Prop 动画，几乎相同:
Animating backgroundColor in React Native

基本上，您不能直接使用颜色十六进制字符串，而是声明您的 colorAnim如 new Animated.Value(1) . ()里面的值应该是整数，例如 1 .

在渲染开始时，整数值被“内插”为真实颜色，如下所示:

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

那么这个 color对象可用于 color您的 Animated.Text

...
color: color,
...