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道具动画的主题，几乎相同： 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,
...

React-Native中的动画文本颜色更改

1 个答案: