Question

这是我在Routes.js中的代码。主要是LoginScreen。登录后进入HomeScreen，必须在其中包含所有我要的文件的抽屉。

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

//~/ Pages imports
import Main from '../src/Pages/Main/index';
import Expenses from '../src/Pages/Expenses/expenses';
import Food from '../src/components/Food/food';
import Host from '../src/components/Host/host';
import Locomotion from '../src/components/Locomotion/locomotion';
import Otherspage from '../src/components/Otherspage/others';

const Routes = createAppContainer(
    createStackNavigator({
       Main: {
         screen: Main,
           navigationOptions: {
               header: null,
           }
       }, 
       Expenses: {
           screen: Expenses,
           navigationOptions: {
            title: 'Despesas',
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontSize: 20, 
              marginRight: 55,
              alignSelf: 'center', 
              textAlign: 'center', 
              justifyContent: 'center', 
              flex: 1, 
              textAlignVertical: 'center', 
              fontWeight: 'bold' },
            headerStyle: {backgroundColor: '#169A85'}
            }
        },

 Food: {
          screen: Food,
          navigationOptions: {
           title: 'Alimentação',
           headerTintColor: '#fff',
           headerTitleStyle: {
             fontSize: 20, 
             marginRight: 55,
             alignSelf: 'center', 
             textAlign: 'center', 
             justifyContent: 'center', 
             flex: 1, 
             textAlignVertical: 'center', 
             fontWeight: 'bold' },
           headerStyle: {backgroundColor: '#169A85'}
           }
       },
        Host: {
          screen: Host,
          navigationOptions: {
          title: 'Hospedagem',
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontSize: 20, 
            marginRight: 55,
            alignSelf: 'center', 
            textAlign: 'center', 
            justifyContent: 'center', 
            flex: 1, 
            textAlignVertical: 'center', 
            fontWeight: 'bold' },
          headerStyle: {backgroundColor: '#169A85'}
          }
      },
        Locomotion: {
          screen: Locomotion,
          navigationOptions: {
          title: 'Locomoção',
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontSize: 20, 
            marginRight: 55,
            alignSelf: 'center', 
            textAlign: 'center', 
            justifyContent: 'center', 
            flex: 1, 
            textAlignVertical: 'center', 
            fontWeight: 'bold' },
          headerStyle: {backgroundColor: '#169A85'}
          }
        },
        Otherspage: {
          screen: Otherspage,
          navigationOptions: {
          title: 'Outros',
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontSize: 20, 
            marginRight: 55,
            alignSelf: 'center', 
            textAlign: 'center', 
            justifyContent: 'center', 
            flex: 1, 
            textAlignVertical: 'center', 
            fontWeight: 'bold' },
          headerStyle: {backgroundColor: '#169A85'}
          }
        },
    })
)
    

export default Routes;

这是我的LoginScreen。我没有固定堆栈和抽屉，所以我将所有页面都放在堆栈上。只是为了完成工作

这是主屏幕。或者应该是现在。

Answer 1

您可以维护两个不同的堆栈 1.Auth堆栈 2.主应用程序堆栈并使用createSwitchNavigator在它们之间移动。

身份验证堆栈

const auth = createStackNavigator(
  {
    signUp:SignUp
  },
  {
    ...stack-config...
  }
)

主应用程序堆栈

const mainApp = createStackNavigator(
      {
        mainApp:MainApp
      },
      {
        ...stack-config...
      }
    )

组合堆栈

const app=createSwitchNavigator(
    {
      auth,
      app
    },
    {
      initialRouteName: isLoggedIn ? 'mainApp' : 'auth'
    }
)

export default createAppContainer(app)

如何在routes.js中将stackNavigator和drawerNavigator一起使用

1 个答案: