官网,以及网上都有常见的Navigator的案例,基本上都是Navigator的直接使用,如果先需要展开一个三级子目录,到第三级,然后点击item跳转到另一个页面,那么Navigator怎么进行数据的传递呢?由于三级目录在同一个页面展示,经三元运算符或if条件判断,确定子级的显示与隐藏,因此在最底层通过this.props获取不到navigator,需要进行参数的逐级传递,具体见以下案例:
这里写代码片
首先创建一个Navigator,跳转到第一个界面AddressTree;
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Navigator,Text, View} from 'react-native';
import TelSearch from './TelSearch';
import TelPeopleView from './TelPeopleView';
export default class telNormal extends Component {
constructor(props){
super(props);
this.renderScene = this.renderScene.bind(this);
}
render() {
return (
<Navigator
style={{flex:1,height:44}}
initialRoute={{
component: AddressTree,
name: 'AddressTree',
}}
configureScene={(route)=>{
return Navigator.SceneConfigs.HorizontalSwipeJump;
}}
renderScene={this.renderScene}
/>
)
}
renderScene(route,navigator) {
let Component = route.component;
return (
<Component {...route.params} navigator={navigator}/>
);
}
}
AppRegistry.registerComponent('telNormal', () => telNormal);
第一个界面显示情况
这里写代码片
通过三元运算符判断是否显示其子级
//本地接送假数据json数据
let faDate = require('./../data/tsconfig.json');
export default class AddressTree extends Component {
constructor(props){
super(props);
this.state = {
testData:'',
}
}
openChange(data,i) {
data.open = !data.open;
this.setState({});
}
render() {
let Datas = faDate.data;
cellContainer = [];
for (let i = 1; i<Datas.length;i++) {
// Datas[0].id == Datas[i].pId ?
//在第一项id open=true,判断pId=1的数据open是false or true false显示pId=1的数据,true显示他的子级
cellContainer.push(
Datas[0].id == Datas[i].pId ?(Datas[i].open == true ? <**CityOpenView** key={Datas[i].name+i} data={[Datas[i],Datas,i]}/> :<TouchableOpacity key={Datas[i].name + i} style={[style.listTitle,{height:44}]}
onPress={
this.openChange.bind(this, Datas[i], i)
}
>
<Image style={style.image_second}
source={Datas[i].open ?require('../img/person.png'): require('../img/contacts_tree_second.png')}
>
</Image>
<Text style={{ marginLeft: 8,fontSize:15,}}>
{Datas[i].name} {Datas[i].id} {Datas[i].pId}
</Text>
</TouchableOpacity>):null
)
}
return (
false == Datas[0].open ?
//加载头布局
( <View style={{flex:1,backgroundColor:'#f4f5f7'}}>
<NavigationBar title={'通讯树状图'} leftButtonTitle={'返回'} leftButtonIcon{require('../img/back.png')}/>
<ScrollView
style={{marginTop:15}}
automaticallyAdjustContentInsets = {true}
showsVerticalScrollIndicator = {true}>
{touchable}
</ScrollView>
</View> ) :
<View style={{flex:1,}}>
<NavigationBar title={'通讯树状图'}
leftButtonTitle={'返回'}
leftButtonIcon={require('../img/back.png')}/>
<ScrollView
style={{marginTop:15}}
automaticallyAdjustContentInsets = {true}
showsVerticalScrollIndicator = {true}>
{touchable}
{cellContainer}
</ScrollView>
</View>
);
}
}
跳转到新的界面
export default class CityOpenView extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,// 接受一个数组,0:当前序号的数据,1:整个json数组,2:编号
}
this.openChangeForth = this.openChangeForth.bind(this);
}
openChange(data,nowId) {
data.open = !data.open;
this.setState({});
}
openChangeForth(data,nowId) {
const {navigator} = this.props;//若不进行navigator的参数传递,则获取不到navigator,会出图片所示错误
InteractionManager.runAfterInteractions(() => {
navigator.push({
component: **TelPeopleView**,//新界面
name: 'TelPeopleView',
param:{
}
});
});
}
在其子级CityOpenView中开始跳转到新的一个界面时,由于最开始时的Navigator没有传递下来,当点击CityOpenView中的其中一个item的时候会找不到navigator这个属性,错误图见下:
找不到navigatro这个属性,所以在AddressTree
Datas[0].id == Datas[i].pId ?(Datas[i].open == true ? <**CityOpenView** key={Datas[i].name+i} data={[Datas[i],Datas,i]}/> :<TouchableOpacity ...>
的时候需要进行navigatro参数的传递
<**CityOpenView** ***{...this.props}*** key={Datas[i].name+i} data={[Datas[i],Datas,i]}/>
通过***{...this.props}*** 可以一级一级的向子级进行传递,在三级子目录的时候也可以进行正常的跳转了