How to use nested routing with adaptive

Question

I am using action-native-router-flux for the main application navigation. I need to configure a nested router. I have a map component that has a sidebar with a list of territories. When I click on the line, I need to switch to the view, which has a list of units belonging to this territory. I looked at some examples and tried to figure it out. There are currently no errors in the console, but nothing is displayed on the sidebar. If there is a better way to do this, please let me know. thanks!

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; 

territories

 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; 

Structural units

 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

Right

The best way to do this is to use Navigator through the component details, so in this case, if you have the ListView component that you want to move to the DetailedView component, just call navigator.push (which must be passed to the ListView through the details).

In other words, you have a “Navigator” that is passed to the ListView, available in this.props.navigator. Then (inside onPress) just call push in the navigator, serving up the next component you want to display (along with any other details you would like to have).

In this case, I expect your code to look something like this:

 // Within the ListView component 'onPress' event this.props.navigator.push({ component: DetailedView, location: this.props.location, // any other props you need to access inside DetailedView }); 

Hope this helps!