React Navigation——在一个屏幕上使用两个导航器答案

【问题标题】：React Navigation -- Using two navigators on a single screenReact Navigation——在一个屏幕上使用两个导航器
【发布时间】：2020-09-30 11:02:19
【问题描述】：

我正在尝试创建一个屏幕，其中包含两个导航器，其中屏幕是堆栈导航器，并且在同一屏幕上是嵌套在其中的选项卡导航器，其内容在屏幕的 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

【问题讨论】：

分享你的代码！
@OliverD 我已经分享了
你能解释一下你还需要什么吗？我试图理解你的观点，但我不能：/
@OliverD，我已经编辑并添加了显示所需外观的图像

标签： javascript react-native react-native-navigation

【解决方案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>

【讨论】：

对不起，我忘了添加一些上下文，主屏幕还包含其他组件，请用所需外观的图像查看已编辑的问题。
@Daniel 在你的情况下，我建议创建自定义标题，并且应该使用外部选项卡组件，如 github.com/satya164/react-native-tab-view
那就让我试试吧

【解决方案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>

【讨论】：