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>
 );
}

App.js

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

HomeScreen.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>
);
}

HomeTabView.js

This is the desired appearance

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>

反应导航-在单个屏幕上使用两个导航器

2 个答案: