Question

我是新来的响应本机的人，我正在尝试制作具有两个标签和一个抽屉的屏幕。为此，我在createDrawerNavigator中使用createTabnavigator，在createStackNavigator中使用此createDrawerNavigator。我已启用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中。

React Native：-滑动手势在react-navigation的抽屉导航器上不起作用

1 个答案: