在 React Native Render Text 组件中显示动画值 [英] Display Animated Value in React Native Render Text Component

问题描述

我无法在渲染器上显示动画的值并返回此错误.

I can not display the Value of Animated on the Render and returns this error.

Invariant Violation:对象作为 React 子对象是无效的(找到:带有键 {value} 的对象).如果您打算渲染一组子项，请改用数组.

Invariant Violation: Objects are not valid as a React child (found: object with keys {value}). If you meant to render a collection of children, use an array instead.

当然，我在console

constructor(props) {
    super(props);

    this.state={
       progress:0
    }

    this.animatedValue = new Animated.Value(0);

    this.animatedValue.addListener((progress) => {
        this.setState({progress})
    });
}

componentDidMount() {
    this.animate()
}

animate() {
    this.animatedValue.setValue(0);
    Animated.timing(
        this.animatedValue,
        {
            toValue: 1,
            duration: 15000,
            easing: Easing.linear
        }
    ).start()
}

render() {
    return(
        <View>
            <Text> {this.state.progress} </Text>
        </View>
    );

}

推荐答案

赋予 addListener 的函数将使用一个以 value 键作为参数的对象被调用，所以不要用整个对象设置 progress，而是使用 value 代替:

The function given to addListener will be called with an object with a value key as argument, so instead of setting progress with the entire object, use the value instead:

this.animatedValue.addListener((progress) => {
  this.setState({ progress: progress.value });
});

这篇关于在 React Native Render Text 组件中显示动画值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！