在學習react-native時，出現一個愣是想不明白的錯誤，在TabNavigator底部導航選單的子頁面中做跳轉，總會彈出錯誤介面，錯誤大概：

即是這個屬性是不存在的。想想，可能需要在導航選單頁裡傳遞一個名為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
    }
});

 

/**
 * 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>
        );
    }
}