同時使用StackNavigation和TabNavigation

Question

我想知道如何在react native中添加標簽導航和堆棧導航以及react導航。

 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，也許以后需要添加Drawer Navigation。

Answer 1

您可以嵌套導航器。 只需創建與創建TabNavigator完全相同的StackNavigator ，然后添加它而不是屏幕即可。

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;