wie verschachteltes Routing mit reaktiven nativen

Question

verwenden Ich benutze react-native-router-flux für meine Apps Hauptnavigation. Ich muss einen verschachtelten Router einrichten. Ich habe eine Kartenkomponente mit einer Seitenleiste mit einer Liste von Gebieten. Wenn ich auf eine Zeile klicke, muss ich zu einer Ansicht wechseln, die die Liste der Unterteilungen enthält, die zu diesem Gebiet gehören. Ich schaute auf einige Beispiele und versuchte es herauszufinden. Momentan gibt es keine Fehler in der Konsole, aber nichts taucht in der Seitenleiste auf. Wenn es einen besseren Weg gibt, lass es mich wissen. Vielen Dank!

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; 

Gebiete

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; 

Subdivisions

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

Rechts.

Der beste Weg, dies zu erreichen, ist die Verwendung des Navigators über die Komponenten der Komponente. Wenn Sie in diesem Fall eine ListView-Komponente haben, die Sie zu einer Detailansicht-Komponente verschieben möchten, rufen Sie einfach navigator.push auf (die durch Requisiten an ListView übergeben werden soll).

Mit anderen Worten, Sie haben Navigator, der an ListView übergeben wird, verfügbar auf this.props.navigator. Dann (innerhalb einer onPress), rufen Sie einfach eine push auf dem Navigator, füttern die nächste Komponente, die Sie (zusammen mit anderen Requisiten, die Sie möchten, dass es auch haben soll).

In diesem Fall würde ich Ihren Code erwarten so etwas wie folgt aussehen:

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

hoffe, das hilft!