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

Question

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

例如：在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，在我的选项卡导航器中，我将堆栈称为屏幕！重要的是，您还要查找我的最后一行，因为在反应导航中，您需要在选项卡导航器(主导航器(上创建AppContainer。此代码是否有助于您了解结构？随意询问是否有可能不清楚的地方并忽略 init(( 函数。