Несколько экранов в одном навигаторе вкладок

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 я называю стек экраном! Важно, чтобы вы также посмотрели мои последние строки, потому что для реагирования на навигацию вам нужно создатьAppContainer в вашем tabnavigator (mainnavigator). Этот код помогает вам понять структуру? не стесняйтесь спрашивать, если что-то неясно, и игнорируйте функции init ().