ReactNative中StackNavigator和TabNavigator的简单使用

基于IconFont的tabbarItem，StackNavigator包含TabNavigator的框架方式

import React, {Component} from 'react';
import {AppRegistry, Image, View, TouchableOpacity, Text, Alert, Modal,Platform} from 'react-native';
import {StackNavigator, TabNavigator} from 'react-navigation';
import Logger from './AppContainer/Utils/Logger';

import HomePage from './AppContainer/Container/HomePage/HomePage';
import Classify from './AppContainer/Container/Classify/Classify';
import ShoppingCart from './AppContainer/Container/ShoppingCart/ShoppingCart';
import MyCenter from './AppContainer/Container/MyCenter/MyCenter';

import IconFont from './AppContainer/Utils/IconFont';

class TabBarItem extends Component {

    render() {
        return (
            <View style={{height:49,alignItems:'center',justifyContent:'center',marginTop:-7}}>
                <IconFont style={{fontSize: 20,color:this.props.tintColor,}} name={this.props.focused ? this.props.chooseName:this.props.name}></IconFont>
                <Text style={{color:this.props.tintColor,fontSize: 12,}}>{this.props.title}</Text>
            </View>
          
        )
    }

}

const MyTabNavigator = TabNavigator({
        HomePage: {
            screen: HomePage,
            navigationOptions: {
                tabBarLabel: ({tintColor, focused}) =>
                        <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        name={'home'}
                        chooseName={'home-choose'}
                        title='首页'
                    />
                ,

            },

        },

        Classify: {
            screen: Classify,
            navigationOptions: {
                tabBarLabel: ({tintColor, focused}) => (
                    <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        name={'book'}
                        chooseName={'book-choose'}
                        title='分类'
                    />
                ),
            }
        },
        ShoppingCart: {
            screen: ShoppingCart,
            navigationOptions: {
                tabBarLabel: ({tintColor, focused}) => (
                        <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        name={'cart'}
                        chooseName={'cart-choose'}
                        title='购物车'
                    />
                ),
                tabBarOnPress: (obj) => {
                    Logger.log(GlobalUtils.getUserLoginStatue());
                    if (GlobalUtils.getUserLoginStatue()) {
                        obj.jumpToIndex(obj.scene.index);
                    } else {
                        alertViewShow();
                    }

                },
            }
        },
        MyCenter: {
            screen: MyCenter,
            navigationOptions: {
                tabBarLabel: ({tintColor, focused}) =>
                        <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        name={'person'}
                        chooseName={'person-choose'}
                        title='我的'
                    />
                ,
                tabBarOnPress: (obj) => {
                    if (GlobalUtils.getUserLoginStatue()) {
                        obj.jumpToIndex(obj.scene.index);
                    } else {
                        alertViewShow();
                    }
                },
            },
        },

    },
    {
        tabBarPosition: 'bottom',  // 显示在底端，android 默认是显示在页面顶端的
        lazy: true, // 是否懒加载
        animationEnabled: false, // 切换页面时是否有动画效果
        activeTintColor: 'red',
        swipeEnabled: false,//是否使用滑动切换
        tabBarOptions: {
            activeTintColor: '#F0415F', // 文字和图片选中颜色
            inactiveTintColor: '#999', // 文字和图片未选中颜色
            showIcon: false, // android 默认不显示 icon, 需要设置为 true 才会显示
            showLabel:true,
            style: [{
                height: 50,
                backgroundColor: 'white',
            },Platform.OS=='android'?{}:{borderTopWidth:0.6,borderTopColor:'#dedede'}],
            indicatorStyle: {
                height: 0  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
            },

        }
    });

function alertViewShow() {
    Alert.alert('温馨提示', '您还没有登录，现在是否登录?', [

        {
            text: '取消', onPress: () => {
            GlobalUtils.saveCacheUserLoginState(false);
        }
        },

        {
            text: '确定', onPress: () => {
            //通知
            Observer.getInstance().notify(ObserverConstant.type.showLoaginView);
        }, style: 'destructive'
        }

    ]);
}

上面是TabNavigator的构建，下面是StackNavigator的使用方法

const SimpleApp = StackNavigator({
    /**
     * tab主页
     */
    Main: {screen: MyTabNavigator},
    /**
     * 订单列表
     */
    OrderMainView: {screen: OrderMainView}

});
export default class MainTab extends BaseComponent {
    constructor() {
        super();
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <SimpleApp/>
                <LoadingView ref={(loadingView) => {
                    _loadingView = loadingView
                }}></LoadingView>
                <ToastView ref={(toastView) => {
                    _toastView = toastView
                }} position={'bottom'}></ToastView>
            </View>
        );
    }
}

压栈出栈的方式

this.props.navigation.navigate(OrderMainView,{data：params});//第一个参数是栈名，后一个是需要传递的参数
this.props.navigation.goBack();//出栈

取参数的方法

let data =  this.props.navigation.state.params.data;//data即为传递的参数