React-Navite：我不能同时渲染“抽屉菜单”和“注销”功能

Question

我正在创建一个Android应用程序，直到我实现登录功能的那一部分工作为止，该功能可以验证您的凭据并将您带到HomeScreen。 然后，我决定将抽屉菜单添加到主屏幕。问题是，我不能同时渲染两个（Routes和Drawer）。在这里很难解释，但是我知道发生了什么，只是不知道如何解决。我想我需要将这两个场景/文件都渲染到HomeScreen上，只是不知道如何做。

退出按钮或抽屉按钮均起作用。我不知道如何让他们两个一起工作。

在项目的主文件夹中，我的' index.js '在 src <中调用文件' src / index.js ' / strong>文件夹

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>
    );
  }
}

。

如您所见，我的渲染方法是从' src / routes.js '

返回 Routes

这是我的“ routes.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>
);

这样，在主屏幕中，我有一个“注销”按钮和一个应打开“抽屉菜单”的图标。看起来像这样- 在主屏幕中，我有这个：

(...)
<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不是函数（因为它没有呈现路由文件）。