IT技术 - 在 React Native Render Text 组件中显示动画值 - 吾爱随笔录

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

IT技术 javascript reactjs react-native

2021-05-01 13:25:36

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

不变性违规：对象作为 React 子对象无效（发现：带有键 {value} 的对象）。如果您打算渲染一组子项，请改用数组。

当然，我看到了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个回答

给定的函数addListener将使用一个以value键作为参数的对象调用，因此不要progress使用整个对象进行设置，value而是使用：

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

如果动画值变化不大，Tholle 解决方案就可以正常工作，因为每次值变化时它都会导致组件重新渲染（正如@saeedZhiany 在他的评论中提到的那样），这可能会导致性能问题。

对于这些情况，更好的解决方案是使用._value属性 of animatedValue，如下所示：

 <Text>
    {Math.round(this.animatedValue._value)}
 </Text>

这样你就可以在不更新组件状态的情况下随时获得真正的value。从而避免性能问题。

其它你可能感兴趣的问题

上一篇结合使用 useEffect 和 Axios 获取 API 数据返回 null - 如何处理？下一篇找不到预设“@babel/env”-reactjs