如何在 react-native 中更改动画中的文本？

Question

我使用 Animated.Text 更改动画文本，但它无法正常工作

我还要求在动画中淡出旧文本并淡入新文本。

import React, { Component, PropTypes } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    Dimensions,
    Animated
} from 'react-native';
import styles from './styles';

const win = Dimensions.get('window');

export default class Logo extends Component {
    constructor(props) {
        super(props);
        this.tempText = new Animated.Value("Hello");
    }

    componentWillMount () {
        Animated.timing(this.tempText, {
            duration: 5000,
            toValue: "New Text",
        }).start();
    };

    render() {
        return (
            <View style={{flex:1}}>
                <Animated.Text style={{color: "#9b9b9b"}}>
                    {this.tempText}
                </Animated.Text>
            </View>
        );
    }
}

实际输出获取 - 5 秒后更改文本但它不起作用。请帮助我。

Answer 1

您想要实现的目标可以Animated在根本不使用的情况下完成，并且实际上Animated并不适合这种特定用途。

可以使用一个简单的变量来替换文本，并且文本更改可以由setTimeout.

动画用于更改数值，而不是文本值。可以这样想 - 如果变化应该在 5 秒的间隔内发生，那么中间值是多少？

改为这样做：

export default class Logo extends Component {
    constructor(props) {
        super(props);
        this.state = {text: "Hello"};
    }

    componentDidMount () {
        setTimeout(() => this.setState({text: "New Text"}), 5000);
    };

    render() {
        return (
            <View style={{flex:1}}>
                <Animated.Text style={{color: "#9b9b9b"}}>
                    {this.state.text}
                </Animated.Text>
            </View>
        );
    }
}