在React Native Render Text组件中显示动画值

时间:2018-07-03 18:25:59

标签: javascript reactjs react-native

我无法在“渲染”上显示“动画值”并返回此错误。

  

不变违规:对象作为React子对象无效(找到:键为{value}的对象)。如果要渲染子级集合,请改用数组。

当然,我在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>
    );

}

2 个答案:

答案 0 :(得分:5)

将使用带有addListener键作为参数的对象来调用赋予value的函数,因此,使用progress而不是对整个对象设置value代替:

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

答案 1 :(得分:1)

如果动画值变化不大,Tholle解决方案效果很好,因为每次更改值时,都会导致组件重新渲染(如@saeedZhiany在其评论中所述),这可能会导致性能问题。

针对这些情况的更好解决方案是使用._value的{​​{1}}属性,如下所示:

animatedValue

这样,您可以随时获取实际值,而无需更新组件状态。从而避免性能问题。