同时堆叠导航和标签导航

Question

我想知道如何在 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，也许稍后我需要添加 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;

同时堆叠导航和标签导航

StackNavigation and TabNavigation in the Same time

javascript

reactjs

react-native

react-navigation