ReactNative-導航條（StackNavigator）與標籤欄（TabNavigator）組合

開始寫時不是很順利，磕磕碰碰也算框架搭建出來了，記錄一下，算是一個開始吧

1.基本目錄結構

2.App.js文件

3.YNMain.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import { StyleSheet} from 'react-native';
//導入外部文件
import NavigatorTextOne from './NavigatorTextOne';
import YNTestButtomNavigator from './YNTestButtomNavigator';

import { createStackNavigator, createAppContainer} from 'react-navigation';


//創建StackNavigator
const YNMain = createStackNavigator({
        Home:{
            screen:YNTestButtomNavigator,
        },
        NavigatorTextOne:{
            screen:NavigatorTextOne,
        },
    },
    {
        initialRouteName: 'Home',
    }
);

export default createAppContainer(YNMain);

4.YNTestButtomNavigation.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

//導入外包文件
import YNHome from '../Home/YNHome';
import YNShop from '../Shop/YNShop';
import YNMine from '../Mine/YNMine';
import YNMore from '../More/YNMore';

import {createAppContainer, createBottomTabNavigator} from 'react-navigation';

export default YNTestButtomNavigator = createBottomTabNavigator({


    Home:{
        screen:YNHome,
        navigationOptions:{
            //tab 的屬性的屬性
            tabBarLabel:'首頁',
            tabBarIcon:({tintColor, focused}) => (
               focused ?
                <Image
                    source={{uri:'icon_tabbar_homepage_selected'}}
                    style={styles.iconStyle}

                />
                :
                <Image
                    source={{uri:'icon_tabbar_homepage'}}
                    style={styles.iconStyle}
                />
            )
        }
    },

    YNShop:{
        screen:YNShop,
        navigationOptions:{
            //tab 的屬性
            tabBarLabel:'商店',
            tabBarIcon:({tintColor, focused}) =>(
            focused ?
                <Image
                    source={{uri:'icon_tabbar_merchant_selected'}}
                    style={styles.iconStyle}

                />
                :
                <Image
                    source={{uri:'icon_tabbar_merchant_normal'}}
                    style={styles.iconStyle}
                />
            )
        }
    },

    YNMine:{
        screen:YNMine,
        navigationOptions:{
               //tab 屬性
            tabBarLabel:'我的',
            tabBarIcon:({tintColor, focused}) =>(
            focused ?
                <Image
                    source={{uri:'icon_tabbar_mine_selected'}}
                    style={styles.iconStyle}

                />
                :
                <Image
                    source={{uri:'icon_tabbar_mine'}}
                    style={styles.iconStyle}
                />
            )
        }
    },

    YNMore:{
        screen:YNMore,
        navigationOptions:{
            //tab 屬性
            tabBarLabel:'更多',
            tabBarIcon:({tintColor, focused}) =>(
            focused ?
                <Image
                    source={{uri:'icon_tabbar_misc_selected'}}
                    style={styles.iconStyle}

                />
                :
                <Image
                    source={{uri:'icon_tabbar_misc'}}
                    style={styles.iconStyle}
                />
            )

        }
    },
    },
    {
        //設置TabNavigator的位置
        tabBarPosition: 'bottom',
        //是否在更改標籤時顯示動畫
        animationEnabled: true,
        //是否允許在標籤之間進行滑動
        swipeEnabled: true,
        //按 back 鍵是否跳轉到第一個Tab(首頁)， none 爲不跳轉
        backBehavior: "none",
        //進入App的首頁
        initialRouteName:'Home',
        //設置Tab標籤的屬性
        tabBarOptions: {
            //Android屬性
            upperCaseLabel: false,//是否使標籤大寫，默認爲true
            //共有屬性
            showIcon: true,//是否顯示圖標，默認關閉
            showLabel: true,//是否顯示label，默認開啓
            activeTintColor: 'orange',//label和icon的前景色 活躍狀態下（選中）
            inactiveTintColor: 'gray',//label和icon的前景色 活躍狀態下（未選中）
        },
        navigationOptions: ({navigation}) => ({
            title: navigation.state.routeName,
            headerStyle: {backgroundColor: '#fff',},
            headerTintColor: color.activeBarText,
            headerTitleStyle: {fontWeight: 'bold',},
        }),

   });
//導航條上的內容展示
YNTestButtomNavigator.navigationOptions = ({navigation}) => {
    let {routeName} = navigation.state.routes[navigation.state.index];
    // You can do whatever you like here to pick the title based on the route name
    let headerTitle = routeName;
    return {
        headerTitle,
    };
};



const styles = StyleSheet.create({
    iconStyle:{

        width:Platform.OS === 'ios' ? 30 :25,
        height:Platform.OS === 'ios' ? 30 :25
    },
});

5.YNHome.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

class YNHome extends React.Component {
    
    render() {
        //導航條設置
        const {navigate} = this.props.navigation;

        return (
            <View style={styles.container}>

                <Text style={styles.welcome}>首nnnnn頁</Text>

                <Button
                    title="Go to NavigatorTextOne"
                    onPress={() => this.props.navigation.navigate('NavigatorTextOne', {name: '這是傳遞到NavigatorThree頁面的參數Name:nihao',title: '需要傳遞的參數bioati'})}
                />
            </View>
        );
    }
}

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

export {YNHome as default};

6. NavigatorTextOne.js文件

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

class NavigatorTextOne extends React.Component{

    static navigationOptions = {

        headerTitle:'首頁iiiii'
    }

    render(){


        const {state} = this.props.navigation;


        return(
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>{state.params.name}</Text>
            </View>
        );
    }
}



export {NavigatorTextOne as default};

7.YNMine.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

class YNMine extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>我的</Text>

            </View>
        );
    }
}

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

export {YNMine as default};

8.YNMore.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

class YNMore extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>更多</Text>

            </View>
        );
    }
}

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

export {YNMore as default};

9.YNShop.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

class YNShop extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>商家</Text>

            </View>
        );
    }
}

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

export {YNShop as default};

 

效果圖：