So machen Sie die Navigation im Inneren reagieren-native-Schublade mit reactive-native-Router-Fluss

Question

Ich habe Schublade mit react-native-drawer erstellt. Schubladenansicht enthält ListView. Wann immer klicken Sie auf die renderRow Methode müssen Navigation in der Schublade selbst anstelle von oben auf dem Welcome Bildschirmstapel zeigen.

Gerade jetzt: Check the Screenshot here

Erwartet: want to achieve something like this - Multi Level Menu

Datei: Komponente/welcome.js

render(){ 
    var settingPanel = <Setting closeDrawer={() => { 
    this.drawer.close(); 
    }} /> 
    return(
    <Drawer 
     ref={c => this.drawer = c} 
     type='overlay' 
     content={settingPanel} 
     ...> 
     <Home /> 
    </Drawer> 
); 
} 

Datei: Komponente/setting.js

render(){ 
    return(
    <ListView 
    dataSource={this.state.dataSource} 
    renderRow={this.renderRow.bind(this)} 
    /> 
); 
} 

renderRow (items) { 
    return(
     <View> 
      <Text style={styles.rowText}>{items.name}</Text> 
      <ImageButton onPress={Actions.trans()} img={fb} /> 
     </View> 
    ) 
}; 

Seine Navigation auf dem Welcome Bildschirm. Ich muss auf die Schublade selbst navigieren. Wie könnte ich das erreichen?

Answer 1

aus es ist Dokumentation here

Optionen Schublade zu öffnen drei Optionen:

1. über die offene Stütze (controlled-Modus):

   <Drawer 
       open={true} 
   

2. die Schublade Ref Verwendung:

   // assuming ref is set up on the drawer as (ref) => this._drawer = ref 
   onPress={() => {this._drawer.open()}} 
   

3. Mit Context

   contextTypes = {drawer: React.PropTypes.object} 
   // later... 
   this.context.drawer.open() 
   

dann an eine andere Komponente navigiert werden reagieren-native-Router-flux Sie eine TouchableOpacity Komponente insted <home /> dann in onPressactions.home() und nach Hause hinzufügen hinzufügen können ist der Schlüssel von reactive-native-router-flux scenecomponent