如何在React Native中使用Navigator從主要組件替換特定的子組件

Question

在我的場景中<MainComponent />有這么多子組件。但是特定的子組件我需要用所有其他子組件填充新數據。

var MainComponent =  React.createClass({ 
     renderScene:function(route, navigator) {

         var type=this.props.type;
         if(type =="text"){
            <GetInputField/>
          }
         else if(type=="number"){
            <GetNumberField/>
         }
         else if(type=="image"){
            <GetImageField />

     //using this <GetImageField> component i am showing two buttons.
     //while click on the button i moving to another scene .
     //in this scene i am showing local images using CameraRoll component.
    // When select the image i need to populate that image in the <GetImageField/> component  through the navigator.
    // But i am unable to replace to the <GetImageField/> component using navigator
         }

     },

      render:function() {
          return(<Navigator
               renderScene={this.renderScene.bind(this)}
               navigator={this.props.navigator}
               navigationBar={
                 <Navigator.NavigationBar style={styles.navBarStyle}
                     routeMapper={NavigationBarRouteMapperDisplayCustomSchema} />
               } />)
     }

 })

在我的腳本i需要填充圖像中的<GetImageField />用的其它部件組成<MainComponent/>

Answer 1

如果CameraRoll是GetImageField的子級，則只需傳遞一個回調屬性即可。 例如：

var GetImageField = React.createClass({
  render: function() {
    return <CameraContainer onPhotoSelected={this.updatePhotos} />
  },

  updatePhotos: function(images) {
    this.setState({ images });
  }
});

如果不是孩子，那么您可能需要使用事件來傳播信息。

值得閱讀一下有關React組件如何通信的概述 。