react-native - 反应原生导航 - 在所有屏幕上显示标题选项卡和底部选项卡

Question

我是一个反应原生的新手，本质上我想要一个标题徽标在我的应用程序中带有标题。在此标题徽标下方，我需要一个菜单​​或选项卡（带有一些用户可以单击的链接/选项卡）类似的页脚（具有用户可以单击的不同链接/选项卡）

所以这就是我接近它的方式：

StackNavigator ( show header logo, header title )
   Screen >> BottomTabScreen ( within this screen is a Bottom Tab navigator )


BottomTabScreen
   BottomTabNavigator
      Screen >> TopTabScreen ( within this screen is a Top Tab Navigator )
      Screen >> B2
      Screen >> B3
      ...


 TopTabScreen
   TopTabNavigator
     Screen >> T1
     Screen >> T2
     Screen >> T3
     ...

因此，使用这种方法能够加载应用程序，在此处附加屏幕打印

我的问题是：

＃1在我的底部选项卡中使用这种方法，单击第一个选项卡（ T ）只会习惯于显示顶部选项卡。理想情况下，我希望始终显示顶部选项卡，当我单击第一个底部选项卡（ T ）时，它应该在标题选项卡和底部选项卡之间显示不同的屏幕/内容

#2如果我单击任何其他底部选项卡（ B1 或 B2 ），它们会导航到新屏幕但标题选项卡菜单会丢失（我需要确保始终显示标题选项卡）

#3当应用程序加载时，我想显示一个登陆屏幕（几乎就像一个“启动”屏幕）但不与任何菜单链接相关的东西（既不是顶部导航也不是底部导航）

这是代码：（ App.js ）

const StackNav = createNativeStackNavigator();
const TopNav = createMaterialTopTabNavigator();
const BottomNav = createMaterialBottomTabNavigator();


function App(){
  return (
   <NavigationContainer>
     <StackNav.Navigator>
      <StackNav.Screen name="Home" component={BottomTabScreen} 
         options={{ headerTitle: props => <LogoTitle {...props} />, headerBlurEffect: 'dark' 
          }} />                
      </StackNav.Navigator>    
   </NavigationContainer>
 );}

BottomTabScreen 包含 BottomNavigator，第一个屏幕包含 TopTab：

 const BottomTabScreen = () =>{
   return (
     <BottomNav.Navigator>
        <BottomNav.Screen name="T" component={TopTabScreen}  />
        <BottomNav.Screen name="B1" component={B1Screen}  />
        <BottomNav.Screen name="B2" component={B2Screen} />     
     </BottomNav.Navigator>
   );
  }

TopTabScreen 包含 TopTab Navigator ：

 const TopTabScreen = () =>{
  return (
      <TopNav.Navigator>
          <TopNav.Screen name="About" component={AboutScreen}  />
          <TopNav.Screen name={"Find Us"} component={FindUsScreen} 
      />
          <TopNav.Screen name="Contact" component={ContactScreen}  />
          <TopNav.Screen name="Events" component={EventsScreen}  />      
     </TopNav.Navigator>    
  );

}

标签： react-nativereact-navigation