, jak korzystać z routingu zagnieżdżonego z native-native speakerem

Question

Używam metody reagowania natywnego routera dla głównej aplikacji mojej aplikacji. Muszę skonfigurować zagnieżdżony router. Mam komponent mapy, który ma pasek boczny z listą terytoriów. Kiedy klikam wiersz, muszę przełączyć się do widoku, który ma listę poddziałów, które należą do tego terytorium. Spojrzałem na kilka przykładów i próbowałem to rozgryźć. Obecnie nie ma błędów w konsoli, ale nic nie pojawia się na pasku bocznym. Jeśli jest lepszy sposób na zrobienie tego, proszę daj mi znać. dzięki!

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; 

Terytoria

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; 

Podrejony

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

prawo.

Najlepszym sposobem na zrobienie tego jest użycie nawigatora przez rekwizyty komponentu - w takim przypadku, jeśli masz komponent ListView, który chcesz przenieść do komponentu DetailedView, po prostu wywołaj navigator.push (które należy przekazać ListView za pośrednictwem rekwizytów).

Innymi słowy, Nawigator jest przekazywany do ListView, dostępnego w tym pliku.props.navigator. Następnie (wewnątrz urządzenia onPress), po prostu zadzwoń na push w nawigatorze, podając następny komponent, który chcesz renderować (wraz z innymi rekwizytami, które chcesz mieć).

W tym przypadku spodziewałbym kod wyglądać mniej więcej tak:

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

Nadzieja to pomaga!