状態変更時にコンポーネントの一部を再レンダリングする方法はありますか？

Question

私は、ライブラリからのprogress.circleを含むコンポーネントを持っています。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）を一定の割合に設定してから、コンポーネントを再レンダリングしてプログレスアニメーションを意図したとおりに表示します。

問題は、再レンダリング処理の結果、1秒間で点滅する問題です。 進捗円を再レンダリングし、残りのコンポーネントを現在のレンダリングフォームに残す方法があります。

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値を渡します