के साथ नेस्टेड रूटिंग का उपयोग कैसे करें मैं अपने ऐप्स मुख्य नेविगेशन के लिए प्रतिक्रिया-देशी-राउटर-फ्लक्स का उपयोग कर रहा हूं। मुझे एक घोंसला राउटर स्थापित करने की जरूरत है। मेरे पास नक्शा घटक है जिसमें प्रदेशों की सूची के साथ साइड बार है। जब मैं एक पंक्ति पर क्लिक करता हूं तो मुझे उस दृश्य में स्विच करने की आवश्यकता होती है जिसमें उस क्षेत्र से संबंधित उपखंडों की सूची होती है। मैंने कुछ उदाहरण देखा और इसे समझने की कोशिश की। वर्तमान में कंसोल में कोई त्रुटि नहीं है लेकिन साइडबार में कुछ भी दिखाई नहीं देता है। अगर ऐसा करने का एक बेहतर तरीका है तो कृपया मुझे बताएं। धन्यवाद!प्रतिक्रिया-मूल
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;
आज रात को आजमाएं। तो मैं sthis मानचित्र घटक में। मैं नेविगेटर एलिमेंट को प्रतिस्थापित करूंगा और जगह पर वापस रखूंगा, । क्योंकि यह लिस्टिंग को सही तरीके से लोड करता है। और फिर मैं मुख्य सूची दृश्य qnd DetailView के बीच नेविगेशन प्रोप लागू करेगा? मैं एक कोणीय पृष्ठभूमि से आया हूं इसलिए मुझे घोंसले के दृश्यों के लिए यूई-राउटर का उपयोग करने के लिए उपयोग किया जाता है। मेरा सवाल यह है कि DetailView कैसे जानता है कि खुद को प्रस्तुत करना है? –
texas697
कोई चिंता नहीं। हां, आपको नेविगेटर को MainListView के माध्यम से विस्तार दृश्य में एक प्रोप के रूप में पास करने की आवश्यकता होगी। –
मैंने मुख्य सूची के साथ पोस्ट को अपडेट किया। क्या आपको याद है कि मुझे क्या करना है। मैं समझता हूं कि आप कह रहे हैं कि इसे कैसे काम करने की आवश्यकता है। बस इसे लागू करने के बारे में नहीं पता – texas697