本文介绍了如何在反应导航中处理两个导航器?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，
我对 React navigation V3 有一些问题，在我的应用程序中，我有一个进入主屏幕的身份验证步骤，它没有默认的抽屉导航，它将是堆栈导航器
飞溅 =>注册 =>登录 =>首页
并且在Home Screen中必须同时包含Drawer Navigation和StackNavigation.
我正在编写一个名为 Route.js 的文件，其中包含我所有的导航，
但是现在createAppContainer 我认为就这样接受 arg.
export default MyApp = createAppContainer(DrawerNavigator);
我想使用另一个未包含在抽屉中的 StackNavigator，如何解决这个问题?
这是一个 Route.js
import React, { Component } from 'react';//在我们的代码中导入反应.进口 {样式表，平台，看法，文本，图像，可触摸不透明度，来自'反应原生';//导入需要的react-navigation组件进口 {创建抽屉导航器，创建堆栈导航器，创建应用容器来自反应导航"；//导入抽屉/侧边栏的所有屏幕从../screens/Splash"导入 Splash；从../screens/Home"导入主页；从../screens/SignUp"导入注册；从../screens/SignIn"导入登录；从../screens/ForgetPassword"导入忘记密码；从../screens/Order"导入订单；从../screens/MapApp"导入 MapApp；从'react-native-vector-icons/Ionicons'导入图标；//所有屏幕的导航抽屉结构类 NavigationDrawerStructure 扩展组件 {//导航抽屉的结构切换抽屉 = () =>{//打开/关闭抽屉的道具this.props.navigationProps.toggleDrawer();};使成为() {返回 (<视图样式={{ flexDirection: 'row' }}><TouchableOpacity onPress={this.toggleDrawer.bind(this)}><图标名称=md-menu";size={30} color='#009' style={{ width: 25, height: 25, marginLeft: 5 }}/></TouchableOpacity></查看>);}}const Route = createStackNavigator({//Screen1 中的所有屏幕都将在此处编入索引飞溅:{屏幕:飞溅，导航选项:{标头:空},},报名: {屏幕:注册，导航选项:() =>({//标题:空标题:注册"，头左:空，headerTintColor: "#0496FF",标题样式:{边框底部颜色:白色"},标题标题样式:{颜色:#0496FF"，文本对齐:居中"，弹性:1，海拔:0，字体大小:25，justifyContent:中心"；}})},登入: {屏幕:登录，导航选项:{标题:登录"，headerRight: <View/>,headerTintColor: "#0496FF",标题样式:{边框底部颜色:白色"},标题标题样式:{颜色:#0496FF"，文本对齐:居中"，弹性:1，海拔:0，字体大小:25，justifyContent:中心"；}}},忘记密码: {屏幕:忘记密码，导航选项:{标题:忘记密码"，headerRight: <View/>,headerTintColor: "#0496FF",标题样式:{边框底部颜色:白色"},标题标题样式:{颜色:#0496FF"，文本对齐:居中"，弹性:1，海拔:0，字体大小:25，justifyContent:中心"；}}},地图应用程序:{屏幕:地图应用程序，导航选项:{title: "地图",headerRight: <View/>,headerLeft: <View/>,headerTintColor: "#0496FF",标题样式:{backgroundColor: "#fafafa",边框底部颜色:白色"，},标题标题样式:{颜色:#0496FF"，文本对齐:居中"，弹性:1，海拔:0，字体大小:25，justifyContent:中心"；}}}});//导航抽屉第一个选项的堆栈导航器const FirstActivity_StackNavigator = createStackNavigator({家: {屏幕:首页，导航选项:({导航})=>({title: '家',headerLeft: <NavigationDrawerStructure navigationProps={navigation}/>,标题样式:{背景颜色:'#FF9800'，阴影不透明度:0，海拔:0，},headerTintColor: '#fff',}),},});//用于导航抽屉第二个选项的堆栈导航器const Screen2_StackNavigator = createStackNavigator({//Screen2 中的所有屏幕都将在此处编入索引命令: {屏幕:订单，导航选项:({导航})=>({title: '订单',headerLeft: <NavigationDrawerStructure navigationProps={navigation}/>,标题样式:{背景颜色:'#FF9800'，},headerTintColor: '#fff',}),},});//Drawer Navigator for the Navigation Drawer/Sidebarconst DrawerNavigatorExample = createDrawerNavigator({//抽屉选项和索引屏幕 1:{//标题屏幕:FirstActivity_StackNavigator，导航选项:{drawerLabel: '家',抽屉图标:() =>(<图标名称=ios-home"大小={30} 颜色='#009'/>),},},屏幕 2:{屏幕:Screen2_StackNavigator，导航选项:{drawerLabel: '订单',抽屉图标:() =>(<图标名称=ios-list-box";大小={30} 颜色='#009'/>),},},});导出默认 MyApp = createAppContainer(DrawerNavigatorExample);App.js
import React, { Component } from "react";从./src/navigations/Route"导入 MyApp导出默认类 App 扩展组件 {使成为() {返回 (<我的应用程序/>)}} 解决方案
不确定我是否理解您的问题，但我建议将每个导航器放在不同的文件中，例如您的 StackNavigation 在名为firstActivity_StackNavigator.js"的文件中，然后您需要按如下方式导出导航器:
...const FirstActivity_StackNavigator = createStackNavigator({家: {屏幕:首页，导航选项:({导航})=>({title: '家',headerLeft: <NavigationDrawerStructure navigationProps={navigation}/>,标题样式:{背景颜色:'#FF9800'，阴影不透明度:0，海拔:0，},headerTintColor: '#fff',}),},});导出默认 FirstActivity_StackNavigator；然后在您的主导航器中，您只需导入您想要的任何导航器
从./firstActivity_StackNavigator.js"导入 FirstActivity_StackNavigator从./screen2_StackNavigator.js"导入 Screen2_StackNavigatorconst DrawerNavigatorExample = createDrawerNavigator({//抽屉选项和索引屏幕 1:{//标题屏幕:FirstActivity_StackNavigator，导航选项:{drawerLabel: '家',抽屉图标:() =>(<Icon name="ios-home" size={30} color='#009'/>),},},屏幕 2:{屏幕:Screen2_StackNavigator，导航选项:{drawerLabel: '订单',抽屉图标:() =>(<Icon name="ios-list-box" size={30} color='#009'/>),},},});...希望这能回答你的问题
Hello Guys,
I have some issue with React navigation V3,In my app, I have an Authentication step to Entering to Home Screen and it doesn't have a Drawer Navigation as a default, it will be Stack Navigator
And in The Home Screen must Contain a Drawer Navigation And StackNavigation at the same time.
I'm Write one file named as a Route.js contain all of my Navigations,
But NowcreateAppContainer just accept on arg like this I think.
export default MyApp = createAppContainer(DrawerNavigator);
and I want to use my other StackNavigator Not Contained in a Drawer, how to solve this problem?
Here is a 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);
App.js
import React, { Component } from "react";
import MyApp from './src/navigations/Route'
export default class App extends Component {
render() {
return (
<MyApp />
)
}
}
解决方案
Not sure if I understand your question so well, But what I suggest is to make each navigator in a different file like for example your StackNavigation in a file called "firstActivity_StackNavigator.js" and then you need to export the navigator as follow:
...
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;
Then in your main navigator you just import whatever navigators you want
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' />
),
},
},
});
...
Hopefully this answer your question
这篇关于如何在反应导航中处理两个导航器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！