cách sử dụng định tuyến lồng nhau với phản ứng-native

Question

Tôi đang sử dụng phản ứng-native-router-flux cho điều hướng chính của ứng dụng của tôi. Tôi cần phải thiết lập một bộ định tuyến lồng nhau. Tôi có một thành phần bản đồ có thanh bên với Danh sách lãnh thổ. Khi tôi nhấp vào một hàng, tôi cần chuyển sang chế độ xem có Danh sách phân ngành thuộc về Lãnh thổ đó. Tôi đã xem xét một số ví dụ và cố gắng tìm ra nó. Hiện tại không có lỗi trong bảng điều khiển nhưng không có gì hiển thị trong thanh bên. Nếu có một cách tốt hơn để làm điều này xin vui lòng cho tôi biết. cảm ơn!

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; 

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

Đúng vậy. Cách tốt nhất để thực hiện việc này là sử dụng Bộ điều hướng thông qua đạo cụ của thành phần, vì vậy, trong trường hợp này, nếu bạn có thành phần ListView mà bạn muốn chuyển sang thành phần Chi tiết, chỉ cần gọi navigator.push (nên được chuyển đến ListView thông qua các đạo cụ).

Nói cách khác, bạn có Navigator được chuyển xuống ListView, có sẵn trên this.props.navigator. Sau đó (bên trong một onPress), chỉ cần gọi push trên trình điều hướng, cho ăn trong thành phần tiếp theo bạn muốn kết xuất (cùng với bất kỳ đạo cụ nào khác mà bạn muốn nó có).

Trong trường hợp này, tôi mong chờ mã của bạn để tìm kiếm một cái gì đó như thế này:

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

Hope this helps!