ReactNative将StackNavigation与DrawerNavigation结合

时间:2019-08-27 19:44:26

标签: react-native

我同时使用createStackNavigator和createDrawerNavigator,但是stackNavigator无法正常工作,我无法导航到任何页面。这是app.js

        const DrawerNavigator = createDrawerNavigator({
        homeScreen: { 
          screen: homeScreen,
          navigationOptions: ({ navigation }) => {
              return {
                title: 'Home',
                headerStyle: {
                  backgroundColor: '#231f20',
                  height: 0,

                },
                headerLeft: null,
                gesturesEnabled: false,
              }

          },
        },
        categoryScreen: { 
          screen: categoryScreen,
          navigationOptions: ({ navigation }) => ({
            title: 'Makeup',
            //title: navigation.getParam('category'),
            headerStyle: {
              backgroundColor: '#231f20',
            },
            headerTintColor: '#f5f5f5',
          }),
        },
        categoryScreen: { 
          screen: categoryScreen,
          navigationOptions: ({ navigation }) => ({
            title: 'Photographers',
            //title: navigation.getParam('category'),
            headerStyle: {
              backgroundColor: '#231f20',
            },
            headerTintColor: '#f5f5f5',
          }),
        },
      },


       {
        contentOptions: {
          activeTintColor: '#d03036',
          activeBackgroundColor : '#f5f5f5',
          inactiveBackgroundColor : 'rgba(0,0,0,0)',
          inactiveTintColor: '#545f7a',
          itemStyle: {
               marginVertical: 0,
              },
          labelStyle: {
              fontWeight:'bold',
              backgroundColor: 'transparent'
          }
      },

        headerMode: 'screen', // screen on android
        // headerBackTitleVisible: false,
        headerTransitionPreset: 'fade-in-place',
        headerLayoutPreset: 'center',
        cardStyle: {},
        initialRouteName: 'homeScreen',
        drawerPosition: 'left',
        contentComponent: CustomDrawerContentComponent,
        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToggleRoute: 'DrawerToggle'
    });

    const AuthStackNavigator = createStackNavigator(
      {
        loadingScreen: { 
          screen: loadingScreen,
          navigationOptions: ({ navigation }) => {
            return {
              header: null,
            }
        },
        },
        loginScreen: { 
          screen: loginScreen,
          navigationOptions: ({ navigation }) => {
              return {
                header: null,
              }
          },
        },
        DrawerNavigator: { 
          screen: DrawerNavigator,
          navigationOptions: ({ navigation }) => {
              return {
                header: null,
                gesturesEnabled: false
              }
          },
        },
      },
      {
        initialRouteName: 'loadingScreen',
        // mode: 'modal',
         headerMode: 'screen', // screen on android
        // headerBackTitleVisible: false,
        headerTransitionPreset: 'fade-in-place',
        headerLayoutPreset: 'center',
        cardStyle: {},
      }
    );
const NavigationApp = createAppContainer(AuthStackNavigator);

// Export the App

export default NavigationApp;


import { useScreens } from 'react-native-screens';
useScreens();

我尝试导出DrawerNavigator,但是然后stacknavigator不再工作了,我可以同时使用两者吗?

我这样做时也遇到了设计问题,因此我尝试搜索了几个小时但没有运气

0 个答案:

没有答案