3

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

例如：在HomeScreen.js中，当用户按下一个按钮时，它会AnotherScreen.js在 Tab Navigator 中导航到该按钮，在这种情况下，它是 Home 按钮。

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

请你帮助我好吗？

4

1 回答 1

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

于 2020-05-27T11:02:21.603 回答