React Native: - Жест смахивания не работает на выдвижном элементе реагирующей навигации

Question

Я новичок, чтобы реагировать на родной, и я пытаюсь сделать экран, который имеет две вкладки и один ящик.Для этого я использую createTabnavigator внутри createDrawerNavigator и этот createDrawerNavigator внутри createStackNavigator.Я включил swipeEnable, но жест смахивания все еще не работает для ящика, но вкладки работают нормально.Пожалуйста, помогите мне найти способ сделать эту работу.

Вот настройка createDrawernavigator.

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);

Answer 1

Поместите LoggedOutStack и LogggedInStack в switchStackNavigator и поместите этот switchStackNavigator в createAppContainer.