如何在状态变化时重新渲染组件的一部分

Question

我有一个组成部分include progress.circle cirt react-native-progress（请参阅链接：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"}
    />
  )
}

这样，当您仅在状态中更改元素时，只能重新渲染circle。然后，您将其导入到主文件中并在此处致电：

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

基本上，渲染函数中的任何内容都将重新渲染。如果progress.circle元素是自行更改状态的位置，则只有我所知道的。

希望这有所帮助！

Answer 2

如先前的答案中所建议的那样，将progress.circle视图作为单独的组件。将进度值保持在全球状态，可以通过此单独的组件访问。如果您使用的是Redux，则可以轻松执行此操作。然后传递该状态。进度的进度支柱中的progress值