[英]React Native:- Swipe gesture is not working on drawernavigator of react-navigation
I am new to react native and i am trying to make screen which has two tabs and one drawer. 我是新来的反应本机,我正在尝试制作具有两个标签和一个抽屉的屏幕。 For this i am using createTabnavigator inside createDrawerNavigator and this createDrawerNavigator inside createStackNavigator.
为此,我在createDrawerNavigator中使用createTabnavigator,在createStackNavigator中使用此createDrawerNavigator。 I have enabled the swipeEnable but still the swipe gesture is not working for drawer but the tabs are working fine.
我已启用swipeEnable,但仍然无法对抽屉使用滑动手势,但选项卡工作正常。 Please help me to find a way to make this work.
请帮助我找到一种使这项工作有效的方法。
Here is the set up of createDrawernavigator. 这是createDrawernavigator的设置。
App.js App.js
import React from "react";
import { TouchableOpacity } from "react-native";
import { connect } from "react-redux";
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer,
createMaterialTopTabNavigator
} from "react-navigation";
import Icon from "react-native-vector-icons/MaterialIcons";
import { DrawerActions } from "react-navigation-drawer";
import Login from "./modules/LoginPage/components/Form";
import NewComplaint from "./modules/newComplaint/components/Form";
import OpenTab from "./modules/homePage/components/OpenTab";
import ClosedTab from "./modules/homePage/components/CloseTab";
import complaintDetails from
"./modules/ComplaintDetail/components/Details";
const App = props =>
// eslint-disable-next-line react/prop-types
props.authentication.data.success ? (
<LoginRootStack />
) : (
<LoggedOutRootStack />
);
const Drawer = createDrawerNavigator(
{
OpenComplaints: createMaterialTopTabNavigator(
{
Open: { screen: OpenTab },
Closed: { screen: ClosedTab }
},
{
order: ["Open", "Closed"],
initialRouteName: "Open"
}
),
ClosedComplaints: createMaterialTopTabNavigator(
{
Open: { screen: OpenTab },
Closed: { screen: ClosedTab }
},
{
order: ["Open", "Closed"],
initialRouteName: "Closed"
}
)
},
{
navigationOptions: ({ navigation }) => ({
title: "Home",
drawerLockMode: "unlocked",
headerLeft: (
<TouchableOpacity
style={{ marginLeft: 10 }}
onPress={() => {
navigation.dispatch(DrawerActions.toggleDrawer());
}}
>
<Icon name="menu" size={30} color="#fff" navigation={navigation}
/>
</TouchableOpacity>
),
headerRight: (
<TouchableOpacity
style={{ marginRight: 10 }}
onPress={() => {
navigation.navigate("newComplaint");
}}
>
<Icon name="add" size={30} color="#fff" navigation={navigation} />
</TouchableOpacity>
),
headerStyle: {
backgroundColor: "#2980b9"
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold"
}
}),
swipeEnabled: true,
contentOptions: {
activeTintColor: "#2980b9"
}
}
);
const LoggedOutStack = createStackNavigator(
{
Login: { screen: Login },
Home: { screen: Drawer },
newComplaint: { screen: NewComplaint },
Details: { screen: complaintDetails }
},
{
swipeEnabled: true,
initialRouteName: "Login",
headerMode: "none"
}
);
const LogggedInStack = createStackNavigator(
{
Login: { screen: Login },
Home: { screen: Drawer },
newComplaint: { screen: NewComplaint },
Details: { screen: complaintDetails }
},
{
swipeEnabled: true,
initialRouteName: "Home"
}
);
function mapStateToProps(state) {
return {
authentication: state.authentication
};
}
export const LoginRootStack = createAppContainer(LogggedInStack);
export const LoggedOutRootStack = createAppContainer(LoggedOutStack);
export default connect(mapStateToProps)(App);
将LoggedOutStack和LogggedInStack放在switchStackNavigator中,并将该switchStackNavigator放在createAppContainer中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.