come utilizzare il routing annidato con nativo react

Question

Sto utilizzando react-native-router-flux per la navigazione principale delle mie app. Devo installare un router nidificato. Ho un componente di mappa che ha una barra laterale con un elenco di territori. Quando clicco su una riga ho bisogno di passare a una vista che ha l'elenco delle sottodivisioni che appartengono a quel territorio. Ho guardato alcuni esempi e ho cercato di capirlo. Al momento non ci sono errori nella console, ma non compare nulla nella barra laterale. Se c'è un modo migliore per farlo, fammi sapere. Grazie!

Maprouter

export default class RootRouter extends Component { 
    render() { 
     return(
      <Router hideNavBar={true}> 
       <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/> 
       <Route name="mapSurveyTerritories" wrapRouter={false} component={MapSurveyTerritories} initial={true}/> 
       <Route name="mapSubdivisions" wrapRouter={false} component={MapSubdivisions} /> 
      </Router> 
     ); 
    } 
} 

Map Component 

BackAndroid.addEventListener('hardwareBackPress', function() { 
    Actions.pop(); 
    return true; 
}); 
export default class Map extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      region: Albuquerque, 
     }; 
    } 


    render() { 
     const { region, markers,surveyTerritories,selectedMarket } = this.state; 
     return (
      <View style={styles.container}> 
        <Navbar 
         title="Map"/> 

      <View style={styles.innerContainer}> 
       <MapView 
        style={styles.map} 
        initialRegion={region} 
        onLongPress={this.onPress.bind(this)}> 
        {markers.map(marker => (
         <MapView.Marker 
          ref="m1" 
          key={marker.id} 
          coordinate={marker.coordinate} 
          title={marker.name}> 
         </MapView.Marker> 
        ))} 
       </MapView> 
       <ScrollView style={styles.sidebarContainer}> 

        <MapRouter /> 
       </ScrollView> 
      </View> 
      </View> 
     ); 
    } 
}; 

module.exports = Map; 

Territori

class MapSurveyTerritories extends Component { 
    constructor(props) { 
     super(props); 

     var ds = new ListView.DataSource({ 
      rowHasChanged: (r1, r2) => r1 != r2 
     }); 

     this.state = { 
      dataSource: ds, 
      showProgress: true 
     }; 
    } 

    componentDidMount() { 
     this.fetchTerritories(); 
    } 

    fetchTerritories() { 
     this.setState({ 
      dataSource: this.state.dataSource 
       .cloneWithRows(territoriesAlbuquerque), 
      showSpinner: false 
     }); 
    } 

    renderRow(rowData) { 
     return (
      <TouchableHighlight 
       onPress={()=>Actions.mapSubdivisions({selectedTerritory:rowData})} 
       underlayColor='#ddd'> 
       <View style={styles.row}> 
        <View style={{paddingLeft: 20}}> 
         <Text> 
          <Text style={{ fontWeight: '600' }}> {rowData.properties.name} </Text> 
         </Text> 
        </View> 
       </View> 
      </TouchableHighlight> 
     ); 
    } 

    render() { 
     return (
      <View style={{flex: 1,justifyContent: 'flex-start'}}> 
<ListView 
        dataSource={this.state.dataSource} 
        renderRow={this.renderRow.bind(this)}/> 
      </View> 
     ); 
    } 
} 

module.exports = MapSurveyTerritories; 

sottodivisioni

class MapSubdivisions extends Component { 
    constructor(props) { 
     super(props); 
var ds = new ListView.DataSource({ 
      rowHasChanged: (r1, r2) => r1 != r2 
     }); 
this.state = { 
      dataSource: ds 
     }; 
    } 

    componentDidMount() { 
     this.fetchSubdivisions(); 
    } 

    fetchSubdivisions() { 
     console.log('fetchSubdivisions', this.props.selectedTerritory); 
     this.setState({ 
      dataSource: this.state.dataSource 
       .cloneWithRows(subdivisionsAlbuquerque), 
      showSpinner: false 
     }); 
    } 

    renderRow(rowData) { 
     return (
      <TouchableHighlight 
       onPress={()=>Actions.mapSubdivisionDetail({selectedSubdivision:rowData})} 
       underlayColor='#ddd'> 
       <View style={styles.row}> 
        <View style={{paddingLeft: 20}}> 
         <Text> 
          <Text style={{ fontWeight: '600' }}> {rowData.properties.name} </Text> 
         </Text> 
        </View> 
       </View> 
      </TouchableHighlight> 
     ); 
    } 

    render() { 
     return (
      <View style={{flex: 1,justifyContent: 'flex-start'}}> 
       <ListView 
        dataSource={this.state.dataSource} 
        renderRow={this.renderRow.bind(this)}/> 
      </View> 
     ); 
    } 
} 

module.exports = MapSubdivisions; 

Answer 1

destra.

Il modo migliore per fare questo è utilizzare il Navigatore attraverso i componenti del componente. In questo caso, se si dispone di un componente ListView che si desidera spostare in un componente DetailedView, è sufficiente chiamare navigator.push (che dovrebbe essere passato a ListView tramite oggetti di scena).

In altre parole, è possibile passare a Navigator in ListView, disponibile su this.props.navigator. Quindi (all'interno di un onPress), chiama il numero push sul navigatore, inserendo il componente successivo che desideri rendere (insieme a qualsiasi altro oggetto di scena che vorresti avere).

In questo caso, mi sarei aspettato il codice a guardare qualcosa di simile:

// Within the ListView component's 'onPress' event 

this.props.navigator.push({ 
    component: DetailedView, 
    location: this.props.location, 
    // any other props you need to access inside DetailedView 
}); 

Spero che questo aiuti!