一个选项卡导航器中的多个屏幕

Posted 2023-04-13

【中文标题】一个选项卡导航器中的多个屏幕

【英文标题】：Multiple screens in one Tab Navigator

【发布时间】：2020-09-14 08:36:40

【问题描述】：

我是 React Native 的新手，我正在尝试创建一个带有底部选项卡导航器的应用程序。但是，在HomeScreen.js 中，这是第一个选项卡导航器屏幕，我希望用户能够通过按下按钮导航到另一个屏幕，同时在同一个选项卡导航器中。

例如：在HomeScreen.js 中，当用户按下一个按钮时，它会导航到AnotherScreen.js，同时停留在选项卡导航器中，在这种情况下，就是主页。

这是我的Apps.js

import React from 'react';
import createBottomTabNavigator from 'react-navigation-tabs';
import Ionicons from '@expo/vector-icons';
import createAppContainer, createSwitchNavigator from 'react-navigation';
import createStackNavigator from 'react-navigation-stack';

import newPassScreen from './screens/newPassScreen';
import BaseScreen from './screens/BaseScreen';
import LoadingScreen from './screens/LoadingScreen';
import RegisterScreen from './screens/RegisterScreen';
import LoginScreen from './screens/LoginScreen';

import DrawerNavigator from './screens/Drawer/DrawerNavigator';
import HomeScreen from './screens/HomeScreen';
import NotificationScreen from './screens/NotificationScreen';
import MessageScreen from './screens/MessageScreen';

import helder from './screens/companies/helder'

import decode, encode from 'base-64'
if (!global.btoa)   global.btoa = encode 
if (!global.atob)  global.atob = decode 

const AppContainer = createStackNavigator(
  
default: createBottomTabNavigator (
  
    Home: 
      screen: HomeScreen,
      navigationOptions: 
        tabBarIcon: ( tintColor ) => <Ionicons name='ios-home' size=24 color=tintColor/>
      
    ,
    Message: 
      screen: MessageScreen,
      navigationOptions: 
        tabBarIcon: ( tintColor ) => <Ionicons name='ios-chatboxes' size=24 color=tintColor/>
      
    ,      
    Notification: 
      screen: NotificationScreen,
      navigationOptions: 
        tabBarIcon: ( tintColor ) => <Ionicons name='ios-notifications' size=24 color=tintColor/>
      
    ,
    Profile: 
      screen: DrawerNavigator,
      navigationOptions: 
        tabBarIcon: ( tintColor ) => <Ionicons name='ios-person' size=24 color=tintColor/>
      
    ,
  ,
  
    defaultNavigationOptions:
      tabBarOnPress: (navigation, defaultHandler) => 
        if (navigation.state.key === 'Post')
          navigation.navigate('postModal')
         else 
          defaultHandler()
        
      
    ,

    tabBarOptions:
      activeTintColor: 'orange',
      inactiveTintColor: 'black',
      showLabel: false
    
  
),
postModal:
  screen: HomeScreen

  ,
   
    mode: 'modal',
    headerMode: 'none'
  
)

const AuthStack = createStackNavigator(
  Base: BaseScreen,
  Login: LoginScreen,
  Register: RegisterScreen,
  Password: newPassScreen
, 
  initialRouteName:''

)

export default createAppContainer(
  createSwitchNavigator(
    
  Loading: LoadingScreen,
  App: AppContainer,
  Auth: AuthStack
,

  initialRouteName: 'Loading'

  )
)

你能帮帮我吗？

【问题讨论】：

所以你可能需要一个 StackNavigator 吗？尝试创建一个名为 homestack 的 stacknavigator，例如，您可以在其中嵌套屏幕，但主要的屏幕可以是您的主组件。之后，您必须在标签导航中将主堆栈称为屏幕

我已经有一个堆栈导航器。如何将其嵌套到代码中？

如果您设置了 stack Navigator，并且第一个屏幕是例如您的主组件，那么只需将 screen 属性更改为 TabNavigator 内的 stackNavigator

这就是我所在的位置，我很难正确更改它，我需要一些帮助

你用的是什么版本的反应导航？？您的代码也有问题，因为我看到您创建了一个堆栈导航器，并且在其中创建了一个选项卡导航器。您的 stacknavigator 应该在外部创建，然后您可以将其名称作为选项卡导航器中的屏幕名称 - 如果您的导航器文件中有更多内容，请更新它并告诉我您的反应导航版本请

【参考方案1】：

import React from "react";
import  createAppContainer  from "react-navigation";
import  createStackNavigator  from "react-navigation-stack";
import  createMaterialBottomTabNavigator  from "react-navigation-material-bottom-tabs";
import SecureScreen from "../screens/SecureScreen";
import WetterScreen from "../screens/WetterScreen";
import SecureLogin from "../screens/SecureLogin";
import TermineScreen from "../screens/TermineScreen";
import SavedImages from "../screens/SavedImages";
import Expo from "expo";

import init from "./db";
import initDB from "./dbTodo";

import  Ionicons  from "@expo/vector-icons";

init()
.then(() => 
  console.log("Database initialized! - Secure")
)
.catch(err=> console.log("DB ERROR: " + err))

initDB()
.then(() => 
  console.log("Database initialized! - ToDo")
)
.catch(err=> console.log("DB ERROR: " + err))

const SecureStack = createStackNavigator(
  Login: 
    screen: SecureLogin,
    navigationOptions: () => (
      title: "Security Login"
    )
  ,
  Secure: 
    screen: SecureScreen,
    navigationOptions: () => (
      title: "Safe Folder"
    )
  ,
  SavedImg : 
    screen: SavedImages,
    navigationOptions: () => (
      title: "Locked Images"
    )
  
);

const tabNavigator = createMaterialBottomTabNavigator(
  Wetter: 
    screen: WetterScreen,
    navigationOptions: 
      tabBarIcon: () => 
        return <Ionicons name="md-cloudy-night" size=24 color="#ccc" />;
      ,
      title: "Wetter"
    
  ,
  Termine: 
    screen: TermineScreen,
    navigationOptions: 
      tabBarIcon: () => 
        return <Ionicons name="md-clipboard" size=24 color="#ccc" />;
      ,
      title: "Termine"
    
  ,
  Secure: 
    screen: SecureStack,
    navigationOptions: 
      tabBarIcon: ( focused ) => 
        if (focused) 
          return <Ionicons name="md-unlock" size=24 color="#ccc" />;
         else 
          return <Ionicons name="md-lock" size=24 color="#ccc" />;
        
      ,
      title: "Secure"
    
  
,
  
    barStyle:  backgroundColor: "black"
  
);

const mainNavigator = createAppContainer(tabNavigator);

// export default Expo.registerRootComponent(mainNavigator);
export default mainNavigator;

如您所见，我有一个 StackNavigator，在我的 tabnavigator 中，我将堆栈称为屏幕！重要的是，您还要查看我的最后几行，因为在反应导航中，您需要在 tabnavigator（mainnavigator）上创建 AppContainer。这段代码能帮助你理解结构吗？随意询问是否有不清楚的地方并忽略 init() 函数。

【讨论】：

非常感谢！这解决了我的问题！如何禁用堆栈导航器中的标题？