Блог

после входа пользователя в систему и перехода на главный экран, если пользователь сдвинется с левой стороны, он вернется к экрану входа в систему, как мне это предотвратить?

я перепробовал множество решений, которые говорят navigationOptions: {gesturesEnabled: false, },

AppNavigation.js

 import React from "react";
import { Animated, Easing, Image, StyleSheet } from "react-native";
import { connect } from "react-redux";
import {
  DrawerNavigator,
  createStackNavigator,
  createBottomTabNavigator
} from "react-navigation";
import {
  createReactNavigationReduxMiddleware,
  reduxifyNavigator
} from "react-navigation-redux-helpers";
import HomeScreen from "../screens/HomeScreen";
import CategoryScreen from "../screens/CategoryScreen";
import DetailScreen from "../screens/DetailScreen";
import ListingScreen from "../screens/ListingScreen";
import LoginScreen from "../screens/LoginScreen";
import MapScreen from "../screens/MapScreen";
import SavedListingScreen from "../screens/SavedListingScreen";
import SearchScreen from "../screens/SearchScreen";
import SignupScreen from "../screens/SignupScreen";
import WelcomeScreen from "../screens/WelcomeScreen";
import { AppIconDark, AppStyles, AppStylesDark, } from "../AppStyles";
import { Configuration } from "../Configuration";
import DrawerContainer from "../components/DrawerContainer";

const noTransitionConfig = () => ({
  transitionSpec: {
    duration: 0,
    timing: Animated.timing,
    easing: Easing.step0
  }
});

const middleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.nav
);

// login stack
const LoginStack = createStackNavigator(
  {
    Login: { screen: LoginScreen },
    Signup: { screen: SignupScreen },
    Welcome: { screen: WelcomeScreen }
  },
  {
    initialRouteName: "Welcome",
    headerMode: "float",
    navigationOptions: ({ navigation }) => ({
      headerTintColor: AppStylesDark.color.main,
      headerTitleStyle: styles.headerTitleStyle, headerStyle: {
        backgroundColor: AppStylesDark.color.background,
        borderBottomWidth: 0,
      },
    }),
    cardStyle: { backgroundColor: AppStylesDark.color.background }
  }
);

const HomeStack = createStackNavigator(
  {
    Home: { screen: HomeScreen,  },
    Listing: { screen: ListingScreen },
    Detail: { screen: DetailScreen },
    Map: { screen: MapScreen }
  },

  {
    initialRouteName: "Home",
    headerMode: "float",

    headerLayoutPreset: "center",
    navigationOptions: ({ navigation }) => ({
      //Back Button
      headerTintColor: AppStylesDark.color.main,
      headerTitleStyle: styles.headerTitleStyle, headerStyle: {
        backgroundColor: AppStylesDark.color.background,
        borderBottomWidth: 0,
      },
      headerStyle: {
        backgroundColor: AppStylesDark.color.background,
        borderBottomWidth: 0,
      },
    }),
    cardStyle: { backgroundColor: "#FFFFFF" }
  }
);

const CollectionStack = createStackNavigator(
  {
    Category: { screen: CategoryScreen },
    Listing: { screen: ListingScreen },
    Detail: { screen: DetailScreen },
    Map: { screen: MapScreen }
  },
  {
    initialRouteName: "Category",
    headerMode: "float",
    headerLayoutPreset: "center",
    cardStyle: { backgroundColor: "#FFFFFF" },
    navigationOptions: ({ navigation }) => ({
      //Back in Collection "ALl Others" Page
      headerTintColor: AppStylesDark.color.main,
      headerTitleStyle: styles.headerTitleStyle, 
      headerStyle: {
        backgroundColor: AppStylesDark.color.background,
        borderBottomWidth: 0,
      },
    })
  }
);

const SavedListingStack = createStackNavigator(
  {
    SavedListing: { screen: SavedListingScreen },
    Detail: { screen: DetailScreen },
    Map: { screen: MapScreen }
  },
  {
    initialRouteName: "SavedListing",
    headerMode: "float",
    headerLayoutPreset: "center",
    cardStyle: { backgroundColor: "#FFFFFF" },
    navigationOptions: ({ navigation }) => ({
      //Back in Save
      headerTintColor: AppStylesDark.color.main,
      headerTitleStyle: styles.headerTitleStyle, headerStyle: {
        backgroundColor: AppStylesDark.color.background,
        borderBottomWidth: 0,
      },
    })
  }
);

const SearchStack = createStackNavigator(
  {
    Search: { screen: SearchScreen },
    Detail: { screen: DetailScreen },
    Map: { screen: MapScreen }
  },
  {
    initialRouteName: "Search",
    headerMode: "float",
    headerLayoutPreset: "center",
    cardStyle: { backgroundColor: "#FFFFFF" },
    navigationOptions: ({ navigation }) => ({
      //Back in Search
      headerTintColor: AppStylesDark.color.main,
      headerTitleStyle: styles.headerTitleStyle, headerStyle: {
        backgroundColor: AppStylesDark.color.background,
        borderBottomWidth: 0,
      },
    })
  }
);

const TabNavigator = createBottomTabNavigator(
  {
    Home: { screen: HomeStack },
    Categories: { screen: CollectionStack },
    Saved: { screen: SavedListingStack },
    Search: { screen: SearchStack }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "Home") {
          iconName = AppIconDark.images.home;
        } else if (routeName === "Categories") {
          iconName = AppIconDark.images.collections;
        } else if (routeName === "Saved") {
          iconName = AppIconDark.images.heart;
        } else if (routeName === "Search") {
          iconName = AppIconDark.images.search;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return (
          <Image
            style={{
              tintColor: focused ? AppStylesDark.color.main : AppStylesDark.color.grey
            }}
            source={iconName}
          />
        );
      }
    }),
    initialLayout: {
      height: 300
    },
    tabBarOptions: {
      //Active " selected Tab "
      activeTintColor: AppStylesDark.color.main,
      inactiveTintColor: AppStylesDark.color.grey,
      style: {
        height: Configuration.home.tab_bar_height,
        backgroundColor: AppStylesDark.color.background
      }
    }
  }
);

// drawer stack
const DrawerStack = DrawerNavigator(
  {
    Tab: TabNavigator
  },
  {
    initialRouteName: "Tab",
    drawerWidth: 200,
    drawerPosition: "right",
    contentComponent: DrawerContainer,
    drawerType: "slide",
  }
);

// Manifest of possible screens
const RootNavigator = createStackNavigator(
  {
    LoginStack: { screen: LoginStack },
    DrawerStack: { screen: DrawerStack }
  },
  {
    // Default config for all screens
    headerMode: "none",
    initialRouteName: "DrawerStack",
    transitionConfig: noTransitionConfig,
    navigationOptions: ({ navigation }) => ({
      color: "black"
    })
  }
);

const AppWithNavigationState = reduxifyNavigator(RootNavigator, "root");

const mapStateToProps = state => ({
  state: state.nav
});

const AppNavigator = connect(mapStateToProps)(AppWithNavigationState);

const styles = StyleSheet.create({
  headerTitleStyle: {
    fontWeight: "normal",
    textAlign: "center",
    alignSelf: "center",
    //Title
    color: AppStylesDark.color.main,
    flex: 1,
    fontFamily: AppStyles.fontName.main
  }
});

export { RootNavigator, AppNavigator, middleware };


  

я ожидаю, что пользователь при перемещении слева направо не вернет его снова на экран входа в систему

на изображении ниже показано, как пользователь перемещается слева направо, и он возвращается к загрузке, которая является предыдущим экраном перед отображением главного экрана.

Пример: { name: ‘Экран примера’, screen: Параметры навигации ExampleView: { gesturesEnabled: false, }, },