React-Navite: я не могу отобразить функции «Меню ящика» и «Выход» одновременно

Question

Я создаю приложение для Android, и оно работало до тех пор, пока я не реализовал функцию входа в систему, которая проверяет ваши учетные данные и переносит вас на домашний экран. Затем я решил добавить меню ящика на домашний экран. Проблема в том, что я не могу отрисовать оба (Маршруты и Ящик) одновременно. Здесь немного сложно объяснить, но я знаю, что происходит, просто не знаю, как это решить. Я думаю, что мне нужно визуализировать обе сцены / файлы на HomeScreen, просто не понимая, как это сделать.

Либо кнопка выхода из системы работает, либо кнопка ящика. Я не могу понять, как заставить их обоих работать вместе.

В основной папке проекта мой ' index.js ' вызывает файл ' src/index.js ', в моей папке src

MyProject / index.js

import {AppRegistry} from 'react-native';
import App from './src'; //this line
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

.

src / index. js:

import React, {Component} from 'react';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import reducers from './reducers';
import ReduxThunk from 'redux-thunk';

import Routes from './routes';
import Apps from './components/App';

export default class App extends Component {
  componentDidMount() {
    let firebaseConfig = {
      (...)
      ALL THE DATABASE INFORMATIONS ARE DECLARED HERE
      (...)
    };
    if (!firebase.apps.length) {
      firebase.initializeApp(firebaseConfig);
    }
  }

  render() {
    return (
      <Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}>
        <Routes />
      </Provider>
    );
  }
}

.

Как видите, мой метод рендеринга возвращает Routes из ' src / rout.js '

И это мой файл rout.js :

import {Router, Scene, Stack} from 'react-native-router-flux';

import Login from './pages/Login';
import Register from './pages/Register';
import Welcome from './pages/Welcome';
import HomeScreen from './pages/HomeScreen';

export default props => (
  <Router
    navigationBarStyle={{backgroundColor: '#3c00c0'}}
    titleStyle={{color: '#ddd'}}>
    <Stack key="root">
      <Scene key="login" component={Login} title="Login" hideNavBar={true} />

      <Scene
        key="register"
        component={Register}
        title="Register"
        hideNavBar={true}
      />

      <Scene
        key="welcome"
        component={Welcome}
        title="Welcome"
        hideNavBar={true}
      />

      <Scene
        key="homeScreen"
        component={HomeScreen}
        title="Home Screen"
        hideNavBar={true}
        initial //I defined this as initial only for testing purposes
      />
    </Stack>
  </Router>
);

Таким образом, на моем домашнем экране у меня есть кнопка выхода из системы и значок, который должен открытьМеню Ящика. Похоже, что - в HomeScreen у меня есть это:

(...)
<TouchableOpacity
    onPress={() =>
      firebase
        .auth()
        .signOut()
        .then(() => Actions.login())
    }>
    <Text style={styles.logoutButton}>Logout</Text>
</TouchableOpacity>

<Icon
    name="bars"
    size={28}
    color="#fff"
    onPress={() => this.props.navigation.openDrawer()}
/>
(...)

С кодом, который я показал выше, функция выхода из кнопки работает, и возвращает меня к экрану входа в систему. Но если я щелкну значок ящика, это выдаст мне ошибку: '_ this.props.navigation.openDrawer не является функцией (потому что это не рендеринг файла ящика).

Теперь,если я переключаю сцену, отображаемую в моем файле ' src / index.js ' (вместо того, чтобы отображать меню), меню ящика работает нормально, но кнопка выхода из системы выдает мне ту же ошибку, но сActions.login: _reactNativeRouterFlux.Actions.login не является функцией (поскольку она не отображает файл маршрутов).