import React, {Component} from "react";
import { StackNavigator, } from 'react-navigation';
import LoginView from './view/login/LoginView';
import ServerSettingView from './view/login/ServerSettingView';
import StationsTickView from './view/favorite/StationsTickView';
import StationDetailView from './view/station/StationDetailView';
import AppTab from './AppTabNavigator';
const AppNavigator = StackNavigator({
LoginView: { screen : LoginView },
ServerSettingView: { screen : ServerSettingView },
StationsTickView: { screen : StationsTickView },
AppTab: { screen: AppTab },
}, {
initialRouteName: 'LoginView',
headerMode: 'none',
navigationOptions:{ gesturesEnabled: true },
});
export default AppNavigator;
========================================
AppTab 如果为tabbar控制器
import React from 'react';
import { TabBarTop, TabBarBottom,TabNavigator } from 'react-navigation';
import TabBarItem from './widget/TabBarItem';
import AlarmView from './view/alarm/AlarmView';
import FavoriteListView from './view/favorite/FavoriteListView';
import { Images, Strings, Dimens, Colors } from '../res';
const TabRouteConfigs = {
FavoriteTabView: {
screen: FavoriteListView,
navigationOptions: ({navigation}) => ({
tabBarLabel: Strings.menu_tab_favorite,
tabBarIcon: ({focused, tintColor}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
isBadge = {false}
normalImage={ Images.menu_favorites_n}
selectedImage={Images.menu_favorites_p}
/>
),
}),
},
AlarmTabView: {
screen: AlarmView,
navigationOptions: {
tabBarLabel: Strings.menu_tab_alarm,
tabBarIcon: ({focused, tintColor}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
isBadge = {true}
normalImage={ Images.menu_alarm_n}
selectedImage={Images.menu_alarm_p}
/>
),
},
}
};
const TabNavigatorConfigs = {
initialRouteName: 'FavoriteTabView',
tabBarComponent: TabBarBottom, // TabBarBottom
tabBarPosition: 'bottom', // 显示位置,android 默认是显示在页面顶端的
swipeEnabled: false, // 是否可以左右滑动切换tab
animationEnabled: false, // 切换页面时是否有动画效果
lazy: true, // 懒加载
backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页), none 为不跳转
tabBarOptions: {
activeTintColor: Colors.colorTabActiveText, // 激活版块的颜色
inactiveTintColor: Colors.colorTabText, // 非激活版块的颜色
style: {backgroundColor: Colors.colorBarBg, },// 背景颜色
labelStyle: {fontSize: Dimens.setSpText(12)}, // 文字大小
allowFontScaling:false,
},
};
const AppTab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);
export default AppTab;
网友评论