如何仅对导航器屏幕之一禁用抽屉导航滑动？

Question

我有一个自定义导航抽屉，但在特定屏幕上，我不希望它可用。

这是我的短代码。

此导航器也包含在切换导航器中。我在 git-hub 和其他论坛上进行了挖掘，目前没有任何工作。我错过了什么吗？有没有人让它工作？

const UserNavigation = createDrawerNavigator({
    ProductListScreen: {screen: ProductListScreen},
    ProductHistoryScreen: {
      screen: ProductHistoryScreen,
      navigationOptions: {
        drawerLockMode: 'locked-closed'
      }
    }
}, {
    initialRouteName: 'ProductListScreen',
    contentComponent: CustomDrawerContentComponent,
})

export default createAppContainer(UserNavigation)

expo 上还有一个工作代码，但我尝试并导致显示双导航器，并且在我不想显示它出现的抽屉的屏幕中。这是我参考世博代码的尝试

const UserStackNavigation = createStackNavigator({
  ProductListScreen: {screen: ProductListScreen},
  ProductHistoryScreen: {
    screen: ProductHistoryScreen
  }
})

const UserNavigation = createDrawerNavigator({
  UserStackNavigation: UserStackNavigation
}, {
  initialRouteName: 'UserStackNavigation',
  contentComponent: CustomDrawerContentComponent,
})

UserStackNavigation.navigationOptions = ({ navigation }) => ({
  drawerLockMode: navigation.state.index === 0 ? 'unlocked' : 'locked-closed',
});
export default createAppContainer(UserNavigation)

Answer 1

您可以使用“swipeEnabled”属性设置每个屏幕的选项。请查看文档的相关页面；

https://reactnavigation.org/docs/drawer-navigator/#options

<Drawer.Navigator initialRouteName="Feed">
  <Drawer.Screen
    name="Feed"
    component={Feed}
    options={{ swipeEnabled: false }}
  />
  <Drawer.Screen
    name="Profile"
    component={Profile}
    options={{ drawerLabel: 'Profile' }}
  />
</Drawer.Navigator>);}

Answer 2

在 v5 你可以使用 <Drawer.Navigator screenOptions={{ gestureEnabled: false }} ...>...</Drawer.Navigator>

Answer 3

问题是我正在使用 Ignite 生成项目模板，并且反应导航版本已修复为 3.0.0。看完此链接的最后一条评论后，我意识到我的语法没有任何问题。

所以我删除了packed.lock.json、yarn.lock、node_modules文件夹，在package.json中我将版本设置为^3.0.0以获得最新版本。

毕竟，我做了一个纱线安装以获得完整的软件包更新。通过此更改，我的反应导航抽屉从 1.0.1 变为 1.3.0，这解决了问题。

还对我的导航进行了一些更改，现在看起来像这样：

export default class UserNavigation extends React.Component{
  render(){
    return <Nav />
  }
}

const Nav = createAppContainer(
  createDrawerNavigator(
    {
      ProductListScreen: {screen: ProductListScreen},
      ProductHistoryScreen: {
        screen: ProductHistoryScreen,
          navigationOptions:{
            drawerLockMode: 'locked-closed'
          }
      }
    }, {
      initialRouteName: 'ProductListScreen',
      contentComponent: CustomDrawerContentComponent,
    }
  )
)