如何使用 react-navigation@3.x 禁用屏幕手势

Question

原题

注意：这仅适用于 react-navigation@3.x

我们想根据某些条件参数禁用特定屏幕的“滑动返回”功能。虽然在 StackNavigator 中实例化屏幕时很容易实现这一点，但我们很难找到有关如何动态处理此问题的任何文档或参考资料。

react-navigation 在版本 6.x and they have renamed the specific parameter numerous times, while we are still using version 3.x 上这一事实也使情况更加复杂。希望这对某人有所帮助，因为我花了比我愿意承认的时间更长的时间来完成这项工作。

附加信息

在 react-navigation@6.x 中，他们将 gesturesEnabled 重命名为 gestureEnabled

Answer 1

禁用屏幕手势

这是针对 react-navigation@3.x 的，这里有一些选项（请注意，对于条件示例，参数名称可以是任何名称）。这是控制滑动返回功能的导航选项：

gesturesEnabled: boolean // defaults to true

功能组件（静态）

MyScreen.navigationOptions = {
  gesturesEnabled: false
}

功能组件（条件）

MyScreen.navigationOptions = ({ navigation }) => ({
   gesturesEnabled: navigation.getParam('myCondition', true) // second param is default value
})

Class 组件（静态）

class MyScreen extends React.Component {

  static navigationOptions = {
    gesturesEnabled: false
  }

  render() {
    // ...
  }
}

Class 组件（条件）

class MyScreen extends React.Component {

  static navigationOptions = ({ navigation }) => ({
    gesturesEnabled: navigation.getParam('isGestureEnabled', true),
  })

  disableScreenGestures() {
    this.props.navigation.setParams({ isGestureEnabled: false })
  }

  enableScreenGestures() {
    this.props.navigation.setParams({ isGestureEnabled: true })
  }

  render() {
    return (
      <Button onPress={() => this.disableScreenGestures()} />
    )
  }
}