如何在react导航中处理两个导航器?

IT技术 javascript reactjs react-native redux react-navigation
2021-05-01 11:59:54

大家好

我对React 导航 V3有一些问题,在我的应用程序中,我有一个进入主屏幕的身份验证步骤,它没有默认的抽屉导航,它将是堆栈导航器

飞溅 => 注册 => 登录 => 主页

并且在 Home Screen 中必须同时包含一个 Drawer Navigation 和 StackNavigation。

我写了一个名为 Route.js 的文件,其中包含我所有的导航,

但是现在 createAppContainer只是接受这样的 arg 我认为。

export default MyApp = createAppContainer(DrawerNavigator);

我想使用我的另一个未包含在抽屉中的 StackNavigator,如何解决这个问题?

这是一个 Route.js


import React, { Component } from 'react';
//import react in our code.
import {
  StyleSheet,
  Platform,
  View,
  Text,
  Image,
  TouchableOpacity,
} from 'react-native';

//Import required react-navigation component 
import {
  createDrawerNavigator,
  createStackNavigator,
  createAppContainer
} from 'react-navigation';

//Import all the screens for Drawer/ Sidebar
import Splash from "../screens/Splash";
import Home from "../screens/Home";
import SignUp from "../screens/SignUp";
import SignIn from "../screens/SignIn";
import ForgetPassword from "../screens/ForgetPassword";
import Order from "../screens/Order";
import MapApp from "../screens/MapApp";
import Icon from 'react-native-vector-icons/Ionicons';

//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component {
  //Structure for the navigatin Drawer
  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          <Icon name="md-menu" size={30} color='#009' style={{ width: 25, height: 25, marginLeft: 5 }} />
        </TouchableOpacity>
      </View>
    );
  }
}


const Route = createStackNavigator({
  //All the screen from the Screen1 will be indexed here
  Splash: {
    screen: Splash,
    navigationOptions: {
      header: null
    },
  },
  SignUp: {
    screen: SignUp,
    navigationOptions: () => ({
      // header: null
      title: "Sign Up",
      headerLeft: null,
      headerTintColor: "#0496FF",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#0496FF",
        textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25,
        justifyContent: "center"
      }
    })
  },
  SignIn: {
    screen: SignIn,
    navigationOptions: {
      title: "Sign In",
      headerRight: <View />,
      headerTintColor: "#0496FF",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#0496FF",
        textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25,
        justifyContent: "center"
      }
    }
  },
  ForgetPassword: {
    screen: ForgetPassword,
    navigationOptions: {
      title: "Forget Password",
      headerRight: <View />,
      headerTintColor: "#0496FF",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#0496FF",
        textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25,
        justifyContent: "center"
      }
    }
  },
  MapApp: {
    screen: MapApp,
    navigationOptions: {
      title: "Map",
      headerRight: <View />,
      headerLeft: <View />,
      headerTintColor: "#0496FF",
      headerStyle: {
        backgroundColor: "#fafafa",
        borderBottomColor: "white",
      },
      headerTitleStyle: {
        color: "#0496FF",
        textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25,
        justifyContent: "center"
      }
    }
  }
});


//Stack Navigator for First Option of Navigation Drawer
const FirstActivity_StackNavigator = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
        shadowOpacity: 0,
        elevation: 0,
      },
      headerTintColor: '#fff',
    }),
  },
});

//Stack Navigator for Second Option of Navigation Drawer
const Screen2_StackNavigator = createStackNavigator({
  //All the screen from the Screen2 will be indexed here
  Order: {
    screen: Order,
    navigationOptions: ({ navigation }) => ({
      title: 'Order',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

//Drawer Navigator for the Navigation Drawer / Sidebar
const DrawerNavigatorExample = createDrawerNavigator({
  //Drawer Optons and indexing
  Screen1: {
    //Title
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Home',
      drawerIcon: () => (
        <Icon name="ios-home" size={30} color='#009' />
      ),
    },

  },
  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Order',
      drawerIcon: () => (
        <Icon name="ios-list-box" size={30} color='#009' />
      ),
    },
  },

});


export default MyApp = createAppContainer(DrawerNavigatorExample);

应用程序.js

import React, { Component } from "react";
import MyApp from './src/navigations/Route'
export default class App extends Component {
  render() {
    return (
      <MyApp />
    )
  }
}
1个回答

不确定我是否理解你的问题,但我的建议是将每个导航器放在一个不同的文件中,例如你StackNavigation在一个名为“firstActivity_StackNavigator.js”的文件中,然后你需要按如下方式导出导航器:

...
const FirstActivity_StackNavigator = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
        shadowOpacity: 0,
        elevation: 0,
      },
      headerTintColor: '#fff',
    }),
  },
});
export default FirstActivity_StackNavigator;

然后在您的主导航器中,您只需导入您想要的任何导航器

import FirstActivity_StackNavigator from "./firstActivity_StackNavigator.js"
import Screen2_StackNavigator from "./screen2_StackNavigator.js"

const DrawerNavigatorExample = createDrawerNavigator({
  //Drawer Optons and indexing
  Screen1: {
    //Title
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Home',
      drawerIcon: () => (
        <Icon name="ios-home" size={30} color='#009' />
      ),
    },

  },
  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Order',
      drawerIcon: () => (
        <Icon name="ios-list-box" size={30} color='#009' />
      ),
    },
  },

});
...

希望这能回答你的问题