美文网首页
AppNavigator.js 导航跳转的实现

AppNavigator.js 导航跳转的实现

作者: able_ | 来源:发表于2019-02-13 14:24 被阅读0次

    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;

    相关文章

      网友评论

          本文标题:AppNavigator.js 导航跳转的实现

          本文链接:https://www.haomeiwen.com/subject/alqdeqtx.html