React Navigation——在一個屏幕上使用兩個導航器

Question

我正在嘗試創建一個屏幕，其中有兩個導航器，其中屏幕是堆棧導航器，並且在同一屏幕上是嵌套在其中的選項卡導航器，其內容在屏幕的 3/5 上可見。 這是我目前的配置

const HomeStack = () => {
 return (
     <Stack.Navigator initialRouteName="Home" headerMode="none">
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen name="ServiceConfig" component={ServiceConfig}/>
     </Stack.Navigator>
 );
}

應用程序.js

<View style={{flex: 1}}>
  <HomeTabView />
</View>

主屏幕.js

export default function HomeTabView() {
return (
    <TopTab.Navigator
        initialRouteName="Recommended"
        initialLayout={{width: Dimensions.get('window').width}}>
        <TopTab.Screen name="Recommended" component={ListServices} />
        <TopTab.Screen name="Recent" component={ListServices} />
    </TopTab.Navigator>
);
}

主頁TabView.js

這是想要的外觀

Answer 1

它應該按以下方式工作

const HomeStack = () => {
 return (
     <Stack.Navigator initialRouteName="Home" headerMode="none">
         <Stack.Screen name="Home" component={HomeTabView} />
         <Stack.Screen name="ServiceConfig" component={ServiceConfig}/>
     </Stack.Navigator>
 );
}

你的標簽視圖應該是這樣的：

export default function HomeTabView() {
return (
    <TopTab.Navigator
        initialRouteName="Recommended"
        initialLayout={{width: Dimensions.get('window').width}}>
        <TopTab.Screen name="Recommended" component={HomeScreen} />
        <TopTab.Screen name="Recent" component={ListServices} />
    </TopTab.Navigator>
);
}

ListServices可以是HomeScreen的一部分

你的應用程序代碼應該是這樣的：

<View style={{flex: 1}}>
  <HomeStack/>
</View>

Answer 2

在主堆棧中，您呈現正常的主屏幕，在主屏幕中，您添加了您想要的內容，然后對於頂部選項卡，您應該實現頂部點擊導航，然后將其像組件一樣導入主屏幕

像這樣

const HomeStack = () => {
 return (
     <Stack.Navigator initialRouteName="Home" headerMode="none">
         ....
         <Stack.Screen name="Home" component={HomeScreen} />
         ....
     </Stack.Navigator>
 );
}

TopTab.js

import React from 'react';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';


const TopTabs = createMaterialTopTabNavigator();

export const MyTopTabs = () => {
  return (
    <TopTabs.Navigator
      tabBarOptions={{
        style: {
          marginVertical: 10,
          backgroundColor: '#fff',
          borderRadius: 20,
          elevation: 0,
          marginHorizontal: 20,
        },
        tabStyle: {
          borderRadius: 20,
          height: 60,
        },
        labelStyle: {
          fontSize: 18,
        },
        activeTintColor: '#fff',
        inactiveTintColor: '#000',
        indicatorStyle: {
          backgroundColor: '#000',
          height: '100%',
          borderRadius: 20,
        },
      }}
      lazy={true}>
      <TopTabs.Screen
        name=" prescription"
        options={{
          title: 'titlee..',
        }}
        component={OpenedAppointments}
      />
      <TopTabs.Screen
        name="nonPresicrpstion"
        options={{
          title: 'title here',
        }}
        component={CompletedAppointments}
      />
    </TopTabs.Navigator>
  );
};


In home screen

<View style={{flex: 1}}>
         ..... Your stuff
        <TopTab />
</View>