React Native disable swiping StackNavigator in TabNavigator

问题

I have TabNavigator with screens 1 and 2 and inside screen 1 I have StackNavigator with screens 1.1 and 1.2. I have enabled swiping and gestures. From root I can swipe tabs between 1 and 2. When I'm on screen 1 and I open screen 1.1 I still can swipe to screen 2 and this ability I need to disabled somehow when the 1.1 screen is open.

I need it to work just like Instagram app (ios). When you are on home screen (1) you can swipe left to see Direct screen (2). When you open friends profile from home screen (1) it opens it as screen (1.1) and you can't swipe left to open Direct screen (2). You can only go back.

I have this functionality working just fine but with this "bug" where I can navigate from screen 1.1 to screen 2.

I tried a lot to solve this in different ways by reading docs and other people problems with navigation but somehow doesn't really work as I need. I suppose something is wrong with my nested screen structure or something or it's solved in different way.

Does someone has a clue?

回答1:

Each screen in the tab can have a navigation option swipeEnabled set individually.

Take a look at the Tab Navigator Screen Navigation Options docs.

MyScreen.navigationOptions = ({navigation}) => ({
  swipeEnabled: false
});

You can set that value to be the result of a function that checks whether the stack navigator has been navigated into or not.

Update - react-navigation 3

This property was removed, and replaced with gesturesEnabled.
You can set the value for each screen individually, or set a default at the navigator configuration level.

const navigator = createStackNavigator(
  {
    Main: { screen: Main },
    ...
  },
  {
    defaultNavigationOptions: {
      gesturesEnabled: false,
    },
    ...
  }
);

来源：https://stackoverflow.com/questions/48114810/react-native-disable-swiping-stacknavigator-in-tabnavigator

标签

reactjs

react-native

react-navigation