2016-03-22 15 views
8

के साथ नेस्टेड रूटिंग का उपयोग कैसे करें मैं अपने ऐप्स मुख्य नेविगेशन के लिए प्रतिक्रिया-देशी-राउटर-फ्लक्स का उपयोग कर रहा हूं। मुझे एक घोंसला राउटर स्थापित करने की जरूरत है। मेरे पास नक्शा घटक है जिसमें प्रदेशों की सूची के साथ साइड बार है। जब मैं एक पंक्ति पर क्लिक करता हूं तो मुझे उस दृश्य में स्विच करने की आवश्यकता होती है जिसमें उस क्षेत्र से संबंधित उपखंडों की सूची होती है। मैंने कुछ उदाहरण देखा और इसे समझने की कोशिश की। वर्तमान में कंसोल में कोई त्रुटि नहीं है लेकिन साइडबार में कुछ भी दिखाई नहीं देता है। अगर ऐसा करने का एक बेहतर तरीका है तो कृपया मुझे बताएं। धन्यवाद!प्रतिक्रिया-मूल

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; 

प्रदेशों

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; 

उप विभाजनों

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; 

उत्तर

5

ठीक है।

इस बारे में जाने का सबसे अच्छा तरीका घटक के प्रोप के माध्यम से नेविगेटर का उपयोग करना है- इसलिए, यदि आपके पास एक सूची दृश्य घटक है जिसे आप एक विस्तृत दृश्य घटक में ले जाना चाहते हैं, तो बस नेविगेटर.push पर कॉल करें (जिसे प्रोप के माध्यम से ListView में पास किया जाना चाहिए)।

दूसरे शब्दों में, आपने Navigator को ListView पर पास कर दिया है, इस.props.navigator पर उपलब्ध है। फिर (एक प्रेस के अंदर), नेविगेटर पर push पर कॉल करें, जो अगले घटक में प्रस्तुत करना चाहते हैं, जिसमें आप प्रस्तुत करना चाहते हैं (किसी अन्य प्रोप के साथ-साथ आप इसे भी चाहते हैं)।

इस मामले में, मैं अपने कोड कुछ इस तरह देखने के लिए उम्मीद करेंगे:

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

आशा इस मदद करता है!

+0

आज रात को आजमाएं। तो मैं sthis मानचित्र घटक में। मैं नेविगेटर एलिमेंट को प्रतिस्थापित करूंगा और जगह पर वापस रखूंगा, । क्योंकि यह लिस्टिंग को सही तरीके से लोड करता है। और फिर मैं मुख्य सूची दृश्य qnd DetailView के बीच नेविगेशन प्रोप लागू करेगा? मैं एक कोणीय पृष्ठभूमि से आया हूं इसलिए मुझे घोंसले के दृश्यों के लिए यूई-राउटर का उपयोग करने के लिए उपयोग किया जाता है। मेरा सवाल यह है कि DetailView कैसे जानता है कि खुद को प्रस्तुत करना है? – texas697

+0

कोई चिंता नहीं। हां, आपको नेविगेटर को MainListView के माध्यम से विस्तार दृश्य में एक प्रोप के रूप में पास करने की आवश्यकता होगी। –

+0

मैंने मुख्य सूची के साथ पोस्ट को अपडेट किया। क्या आपको याद है कि मुझे क्या करना है। मैं समझता हूं कि आप कह रहे हैं कि इसे कैसे काम करने की आवश्यकता है। बस इसे लागू करने के बारे में नहीं पता – texas697

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^