StackNavigation和TabNavigation在同一时间

时间:2018-02-10 17:37:07

标签: javascript reactjs react-native react-navigation

我想知道如何添加标签导航和堆栈导航以及本地反应导航。

 import React, { Component } from 'react';
    import { Platform, StyleSheet, Text, View, Image, TouchableHighlight, ScrollView, Dimensions } from 'react-native';
    import {StackNavigator,TabNavigator} from 'react-navigation';
    import Scores from './src/scores.js';
    import Profile from './src/profile.js';
    import Favourite from './src/favourite.js'

   const MyApp = TabNavigator({
      Scores: {
        screen: Scores,
      },
      Favs: {
        screen:Favourite ,
      },
      Profile: {
        screen:Profile,
      },
    }, {
      tabBarPosition: 'bottom',
      animationEnabled: false,
      tabBarOptions: {
        activeTintColor: '#F7C01C',
      },
    });

    export default MyApp;

这里我有TabNavigation只能工作,但我仍然需要添加stacknavigatio,也许稍后我需要添加抽屉导航。

1 个答案:

答案 0 :(得分:0)

您可以嵌套导航器。只需创建一个StackNavigator,就像创建TabNavigator一样,然后添加它而不是屏幕。

const MyFavs =  StackNavigator({
  FavouriteList: {
    screen: FavouriteList,
  },
  ViewFavourite: {
    screen: ViewFavourite,
  },
}, {
  initialRouteName: 'FavouriteList'
});


const MyApp = TabNavigator({
  Scores: {
    screen: Scores,
  },
  Favs: {
    screen: MyFavs,
  },
  Profile: {
    screen: Profile,
  },
}, {
  tabBarPosition: 'bottom',
  animationEnabled: false,
  tabBarOptions: {
    activeTintColor: '#F7C01C',
  },
});

export default MyApp;