在TabNavigator中使用Navigation报错undefined is not an object (this.props.navigation.navigate)

在学习react-native时，出现一个愣是想不明白的错误，在TabNavigator底部导航菜单的子页面中做跳转，总会弹出错误界面，错误大概：

undefined
is not an object (this.props.navigation.navigate)，

即是这个属性是不存在的。想想，可能需要在导航菜单页里传递一个名为navigation的参数才行吧，于是在首页的底部菜单每个子页都加上这个属性，结果，还真可以了，虽然还不是很懂Navigation路由的深层原理，但是问题终究还是解决了，记录一下，代码如下：

路由配置代码：

/**
* Created by Administrator on 2017/7/20.
*/
import {StackNavigator} from 'react-navigation';

import Main from './js/main';
import MySelf from './js/myself';
import List from './js/list';

const NaviApp = StackNavigator({
Main: {screen: Main},
MySelf: {screen: MySelf},
List: {screen: List}
},{
initialRouteName: 'Main'
});

export default NaviApp;

主页代码：

/**
* Created by Administrator on 2017/7/19.
*/

import React,{Component} from 'react';
import {
View,
Image,
Text,
StyleSheet,
Dimensions
} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';

import MySelf from './myself';
var navigation = null;
export default class Main extends Component {

constructor(props){
super(props);
this.state = {
selectedTab: '首页',
};
navigation = this.props.navigation;
}

render(){
return(
<View style={styles.footer}>
<TabNavigator>
<TabNavigator.Item
selected={this.state.selectedTab === '首页'}
title="首页"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={require("../imgs/index.png")} />}
renderSelectedIcon={() => <Image style={styles.icon} source={require("../imgs/indexselected.png")} />}
onPress={() => this.setState({ selectedTab: '首页' })}
>
<MySelf navigation={navigation}/>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === '新闻'}
title="新闻"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={require("../imgs/news.png")} />}
renderSelectedIcon={() => <Image style={styles.icon} source={require("../imgs/newsselected.png")} />}
onPress={() => this.setState({ selectedTab: '新闻' })}
>
<MySelf navigation={navigation}/>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === '圈子'}
title="圈子"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={require("../imgs/circle.png")} />}
renderSelectedIcon={() => <Image style={styles.icon} source={require("../imgs/circleselected.png")} />}
onPress={() => this.setState({ selectedTab: '圈子' })}
>
<MySelf navigation={navigation}/>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === '我的'}
title="我的"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={require("../imgs/my.png")} />}
renderSelectedIcon={() => <Image style={styles.icon} source={require("../imgs/myselected.png")} />}
onPress={() => this.setState({ selectedTab: '我的' })}
>
<MySelf navigation={navigation}/>
</TabNavigator.Item>
</TabNavigator>
</View>
);
}
}

const styles = StyleSheet.create({
footer: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F00',
},
tabText: {
color: '#000',
textAlign: 'center',
fontSize: 14,
},

selectedTabText: {
color: '#F00',
textAlign: 'center',
fontSize: 14,
},

icon: {
width: 20,
height: 20
}
});

MySelf页面代码：

/**
* Created by Administrator on 2017/7/19.
*/

import React, {Component} from 'react';

import {
View,
Text,
TouchableOpacity
} from 'react-native';

var navigation = null;

export default class MySelf extends Component {

constructor(props){
super(props);
navigation = this.props.navigation;
}
render(){
return(
<TouchableOpacity onPress={()=>navigation.navigate('List')}>
<View style={{backgroundColor:'#FFF'}}>
<Text>I am MySelf Page!!</Text>
</View>
</TouchableOpacity>
);
}
}