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