rn 通讯录树状结构

官网，以及网上都有常见的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', () => telNorma）
第一个界面显示情况 
这里写代码片 通过三元运算符判断是否显示其子级地接送假数据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}*** 可以一级一级的向子级进行传递，在三级子目录的时候也可以进行正常的跳转了