Reactネイティブクローンされた子コンポーネントは、小道具の変更に応じて再レンダリングされません

Question

私はカスタムナビゲータコンポーネントを作成しています。私は彼らがこのようにプッシュとポップシーンを許可するナビゲーターのスタックコンポーネントnavigator小道具を提供する必要があります。

this.props.navigator.push(<Product id='4815'>) 
this.props.navigator.pop() 

この結果を達成するために、私のナビゲーターのクラスの中、私はReact.cloneElement()使用しました：

class Navigator extends Component { 

    constructor(props) { 
    super(props) 
    this.state = { stack: [this._addNavigator(props.children)] } 
    } 

    _addNavigator(scene) { 
    return React.cloneElement(scene, { 
     navigator: { 
     push: this.push, 
     pop: this.pop, 
     popToRoot: this.popToRoot 
     } 
    }) 
    } 

    push(scene) { 
    this.setState({ 
     stack: [...this.state.stack, this._addNavigator(scene)] 
    }) 
    } 

    ... 

} 

特定のシナリオを除いて、すべてうまく動作します。

class App extends Component { 
    constructor(props) { 
    super(props) 
     this.state = { toggle: false } 
    } 
    render() { 
    return (
     <View> 
     <TouchableOpacity onPress={() => { 
      this.setState({ toggle: !this.state.toggle }) 
     }}> 
      <Text>Toggle</Text> 
     </TouchableOpacity> 
     <Navigator> 
      <SampleScene backgroundColor={this.state.toggle ? 'green' : 'black'} /> 
     </Navigator> 
     </View> 
    ) 
    } 

私はナビゲーターの子供たちにいくつかの変更可能な小道具、できるだけ早く小道具の変更を渡す

は、子コンポーネントを再描画しません。上記の例では、ユーザーがToggleボタンを押しても、SampleSceneのbackgroundColorは黒のままです（ toggleのAppクラスの初期状態は falseに設定されているため）。 SampleSceneの render()メソッドがちょうど呼び出されたようです。この問題のトラブルシューティングを行うにはどうすればよいですか？

Answer 1

問題が解決しました。 Navigatorの中で、私はcomponentWillReceiveProps経由で新しい小道具を傍受しなければなりませんでした。 setStateメソッドを使用してスタックをnewPropsの子に設定すると、ナビゲータが適切に再レンダリングされました。