Question

我有TabNavigator屏幕1和2以及屏幕1我有StackNavigator屏幕1.1和1.2。我已启用滑动和手势。从根目录开始，我可以在1和2之间滑动标签。当我在屏幕1上打开屏幕1.1时，我仍然可以滑动到屏幕2，当1.1屏幕打开时，我需要以某种方式禁用此功能。

我需要它像Instagram应用程序（ios）一样工作。当您在主屏幕（1）时，您可以向左滑动以查看直接屏幕（2）。当您从主屏幕（1）打开朋友个人资料时，它会将其打开为屏幕（1.1），您无法向左滑动以打开直接屏幕（2）。你只能回去。

我有这个功能工作得很好但是这个＆＃34; bug＆＃34;我可以从屏幕1.1导航到屏幕2。

我尝试了很多方法，通过阅读文档和其他人的导航问题以不同的方式解决这个问题，但不知何故，我的确需要工作。我想我的嵌套屏幕结构有什么问题，或者它以不同的方式解决了。

有人有线索吗？

Answer 1

在React Navigation v5中，gestureEnabled不是gesturesEnabled。

https://reactnavigation.org/docs/stack-navigator/#gestureenabled

Answer 2

选项卡中的每个屏幕都可以单独设置导航选项swipeEnabled。

查看Tab Navigator Screen Navigation Options文档。

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

您可以将该值设置为检查堆栈导航器是否已导航的函数的结果。

更新 - react-navigation 3

此属性已被删除，并替换为gesturesEnabled 您可以单独设置每个屏幕的值，也可以在导航器配置级别设置默认值。

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

Answer 3

尽管这是一个有点老的话题，但我还是想避免一些人匆忙浏览讨论过旧的React Navigation版本的老旧无用的GitHub帖子。

对于React Navigation 5，只需创建StackNavigator并将带有options值的{ gestureEnabled: false }属性传递到屏幕，该屏幕就不会对手势做出反应：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const MyStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      headerMode="screen"
    >
      <Stack.Screen
        name="Settings"
        component={Settings}
        // disable gestures for one specific screen
        options={{
          gestureEnabled: false,
        }}
      />
    </Stack.Navigator>
  );
}

在此处了解更多信息：https://reactnavigation.org/docs/stack-navigator/#example

React Native禁用在TabNavigator

3 个答案:

更新 - react-navigation 3