当道具改变时，React Native克隆的子组件不会被重新渲染

Question

我正在创建一个自定义Navigator组件。我需要为Navigator的堆栈组件提供一个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>
    )
  }

当我将一些可变的道具传递给导航器的子项时，一旦道具发生变化，子组件就不会重新渲染。在上面的示例中，尽管用户按下了切换按钮，但SampleScene的backgroundColor保持黑色（因为toggle的App类初始状态设置为false）。似乎SampleScene的render()方法只被调用一次。我怎么能排除这种行为？