在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>
        );
    }
}