Question

我有一个组件，包括来自库react-native-progress的progress.circle（参见链接：https://github.com/oblador/react-native-progress）。

最初，我将进度循环的进度道具设置为在空闲状态下设置为0的状态变量，如下面的代码所示：

<Progress.Circle
        showsText={true}
        progress={this.state.progress} // this.state.progress = 0
        size={width * 0.1388888888888}
        color={"#EF5D6C"}
/>

发生用户交互次数，将状态变量（this.state.progress）设置为某个百分比，然后重新渲染组件以按预期显示进度动画。

问题是由于重新渲染过程，组件会闪烁一秒钟。那么有没有办法只重新渲染进度循环，并将其余的组件保留为当前的渲染形式。

Answer 1

您可以尝试将Progress.Circle元素分离到另一个文件中，使其在自己的渲染器中。

render() {
  return (
    <Progress.Circle
      showsText={true}
      progress={this.state.progress} // this.state.progress = 0
      size={width * 0.1388888888888}
      color={"#EF5D6C"}
    />
  )
}

这样当你在状态中更改元素时，只应重新渲染progress.circle。然后你将它导入你的主文件并在那里调用它：

render(){
  ....
  <ProgressCircle />
  ....
}

基本上渲染函数内部的任何内容都将重新渲染。如果progress.circle元素在状态发生变化的地方独立，那么只有它应该重新渲染到目前为止。

希望这在某种程度上有所帮助！

Answer 2

将progress.circle视图作为单独的组件，如上一个答案中所建议的那样。将进度值保持在全局状态，可以通过此单独组件访问。如果您使用的是Redux，则可以轻松完成。然后在Progress.Circle的进度道具中传递state.progress值

如何在状态改变时重新渲染部分组件？

2 个答案: