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> 
    ) 
    } 

내가 네비게이터 아이들에게 몇 가지 변경 가능한 소품, 빨리와 소품 변경을 통과

는, 아이 컴퍼넌트가 다시 쓰게하지 않습니다. 위의 예에서 사용자가 토글 버튼을 눌러도 SampleScene의 backgroundColor는 검은 색으로 유지됩니다 ( toggle의 App 클래스 초기 상태가 false으로 설정되어 있기 때문에). SampleScene의 render() 메서드가 한 번 호출 된 것처럼 보입니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

문제가 해결되었습니다. Navigator에서 componentWillReceiveProps를 통해 새로운 소품을 가로 채야했습니다. setState 메서드를 통해 스택을 newProps의 자식으로 설정하면 네비게이터가 제대로 다시 렌더링됩니다.