一个标签导航器中的多个屏幕

Question

我是 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'
}
  )
)

你能帮帮我吗？

Answer 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() 函数。

一个标签导航器中的多个屏幕

Multiple screens in one Tab Navigator

navigation

reactjs

react-native

react-navigation-bottom-tab