TabNavigator+ AppStackNavigation 使用

react-navigation 侧滑DrawerNavigation 无法正常打开

TabNavigator+ AppStackNavigation 使用

index.js //项目入口

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('ReactApp1', () => App);

App.js //第一个页面

import {AppStackNavigation} from './js/pages/Navigators'

export default AppStackNavigation;  

Navigators.js //导航页面

import {StackNavigator,TabNavigator} from 'react-navigation';

import HomePage from './HomePage'
import TrendPage from  './TrendPage'
import FavoritePage from  './FavoritePage'
import MyPage from  './MyPage'

//在 tabBarIcon 中 使用 Image 或其他基础控件时 必须导入 React
import React, { Component } from 'react';
import {
    Image,
    StyleSheet,
} from 'react-native';

export const AppTabNavigator = TabNavigator({
    HomePage:{
        screen:HomePage,
        navigationOptions:{
            tabBarLabel:'Popular',
            //在 tabBarIcon 中 使用 Image 或其他基础控件时 必须导入 React
            tabBarIcon: ({tintColor}) => <Image
                style={[styles.tabBarImage, {tintColor: tintColor}]}
                source={require('./../../images/home1.png')}
            />,

        }
    },
    TrendPage:{
        screen:TrendPage,
        navigationOptions:{
            tabBarLabel:'trending',
            tabBarIcon: ({tintColor}) => <Image
                style={[styles.tabBarImage, {tintColor: tintColor}]}
                source={require('./../../images/home1.png')}
            />,

        }
    },
    FavoritePage:{
        screen:FavoritePage,
        navigationOptions:{
            tabBarLabel:'Favorite',
            tabBarIcon: ({tintColor}) => <Image
                style={[styles.tabBarImage, {tintColor: tintColor}]}
                source={require('./../../images/home1.png')}
            />,

        }
    },
    MyPage:{
        screen:MyPage,
        navigationOptions:{
            tabBarLabel:'My',
            tabBarIcon: ({tintColor}) => <Image
                style={[styles.tabBarImage, {tintColor: tintColor}]}
                source={require('./../../images/home1.png')}
            />,
        }
    }
},{
    //设置TabNavigator的位置
    tabBarPosition: 'bottom',
    //是否在更改标签时显示动画
    animationEnabled: true,
    //是否允许在标签之间进行滑动
    swipeEnabled: true,
    //按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
    backBehavior: "none",

    tabBarOptions: {
        //Android属性
        upperCaseLabel: true,//是否使标签大写，默认为true
        //共有属性
        showIcon: true,//是否显示图标，默认关闭
        showLabel: true,//是否显示label，默认开启
        activeTintColor: '#169',//label和icon的前景色 活跃状态下（选中）
        inactiveTintColor: 'gray',//label和icon的前景色 活跃状态下（未选中）

    },

})

export const AppStackNavigation = StackNavigator({
    TabNav:{
        screen:AppTabNavigator,
        navigationOptions:{
            title:'AppTabNavigator',
            header:null,//顶部 导航栏 隐藏
        }
    }

},{
    header:'none'
})

const styles = StyleSheet.create({
    tabBarImage: {
        width: 24,
        height: 24,
    },
    tabBar: {
        backgroundColor: 'white',
    },
    tabBarLabel: {
        fontSize: 19,
    },
    tabBarItem: {
        height: 56,
    },
})