Я использую action-native-router-flux для основной навигации по моим приложениям. Мне нужно настроить вложенный маршрутизатор. У меня есть компонент карты, который имеет боковую панель со списком территорий. Когда я нажимаю на строку, мне нужно переключиться на представление, в котором есть список подразделений, принадлежащих этой территории. Я посмотрел на некоторые примеры и попытался понять это. В настоящее время ошибок нет в консоли, но на боковой панели ничего не отображается. Если есть лучший способ сделать это, пожалуйста, дайте мне знать. благодаря!Как использовать вложенную маршрутизацию с ответной нативной
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;
Попробуем сегодня вечером. Поэтому я в компоненте Map. Я бы заменил элемент Navigator и вернул его на место, . Потому что это правильно загружает список. И тогда я бы реализовал навигационные реквизиты между MainListView qnd DetailView? Я исхожу из углового фона, поэтому я использую ui-router для вложенных представлений. Мой вопрос в том, как DetailView знает, где сделать себя? –
texas697
Не беспокойтесь. Да, вам нужно будет пропустить навигатор в качестве опоры через MainListView в DetailView. –
Я обновил сообщение с помощью MainListView. ты не возражаешь, показывая мне, что мне нужно делать. Я понимаю, что вы говорите, насколько это необходимо для работы. просто не знаю, как его реализовать – texas697