react-navigation之TabNavigator使用方法及附上超級詳細樣例代碼

網上雖說有很多篇關於react-navigation的使用說明的文章和博客，不過我找了大半天也不見詳細具體的使用方法，大部分都是介紹種種屬性的，爲此鄙人自告奮勇，整理了一份比較詳細的有關react-navigation的使用樣例代碼，本篇文章繼續介紹TabNavigator的使用方法。

TabNavigator

用導航欄實現不同頁面間的跳轉，如下圖：

限於篇幅，有關TabNavigator的各種屬性以及頁面間傳值這裏不再贅述，代碼裏已經寫了，請自行百度或谷歌。

不多說，先上代碼，先乾爲敬，代碼下方會有詳細說明：

說明：樣例的版本是0.53

下面代碼粘貼即可使用

1. App.js

import React, { Component } from 'react';
import {
  StyleSheet,
} from 'react-native';
import Pages from './src/Pages';
type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <Pages/>
    );
  }
}

App.js大家都很熟悉，react native的啓動頁，這裏將所有頁面的集成路由頁Pages.js頁面當做組件引用進來，相信大家都知道怎麼做，不再贅述，如有不清楚的請到這裏來： react native 自定義組件以及引用

2. Pages.js

import React, { Component } from 'react';
import FirstPage from './FirstPage';
import SecondPage from './SecondPage';
import ThirdPage from './ThirdPage';
import FourthPage from './FourthPage';
import {
    StackNavigator,
    TabNavigator,
    DrawerNavigator
} from 'react-navigation';
export default class Pages extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <SimpleAppNavigator/>
        )
    }
}
const SimpleAppNavigator = TabNavigator({
    page1: {screen: FirstPage},
    page2: {screen: SecondPage},
    page3: {screen: ThirdPage},
    page4: {screen: FourthPage}
},{
     initialRouteName: 'page1',
     swipeEnabled: true,
     animationEnabled: true,
     lazy: false,
     tabBarPosition:'bottom',
 });

（下面的說明不再是樣例中的代碼）

Pages.js是所有的頁面的集合頁面：

(1) 將所有的子頁面導入進來

import FirstPage from './FirstPage';
import SecondPage from './SecondPage';
import ThirdPage from './ThirdPage';
import FourthPage from './FourthPage';

(2)然後通過TabNavigator註冊路由

const SimpleAppNavigator = TabNavigator({
    page1: {screen: FirstPage},
    page2: {screen: SecondPage},
    page3: {screen: ThirdPage},
    page4: {screen: FourthPage}
},{
     initialRouteName: 'page1',
     swipeEnabled: true,
     animationEnabled: true,
     lazy: false,
     tabBarPosition:'bottom',
 });

(3) 然後在render裏返回 SimpleAPPNavigator即可：

render(){
        return(
            <SimpleAppNavigator/>
        )
    }

3. FirstPage.js

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
} from 'react-native';
export default class SecondPage extends Component {
    static navigationOptions = {
        tabBarLabel: '頁面1',
        //drawerLabel:'頁面1'
    };
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    This is First Page!
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    textView: {
        fontSize: 16,
        textAlign: 'center',
        margin: 10,
        color:'red'
    },
});

4. SecondPage.js

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
} from 'react-native';
export default class SecondPage extends Component<Props> {
    static navigationOptions = {
        tabBarLabel: '頁面2',
        //drawerLabel:'頁面2'
    };
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    This is Second Page!
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    textView: {
        fontSize: 16,
        textAlign: 'center',
        margin: 10,
        color:'red'
    },
});

5. ThirdPage.js

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
} from 'react-native';
export default class ThirdPage extends Component<Props> {
    static navigationOptions = {
        tabBarLabel: '頁面3',
        //drawerLabel:'頁面3'
    };
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    This is Third Page!
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    textView: {
        fontSize: 16,
        textAlign: 'center',
        margin: 10,
        color:'red'
    },
});

6. FourthPage.js

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
} from 'react-native';
export default class FourthPage extends Component<Props> {
    static navigationOptions = {
        tabBarLabel: '頁面4',
        //drawerLabel:'頁面4'
    };
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    This is Fourth Page!
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    textView: {
        fontSize: 16,
        textAlign: 'center',
        margin: 10,
        color:'red'
    },
});