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

Question

原来的问题

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

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

这还因为react-navigation 的版本为6.x 并且他们已多次重命名特定参数，而我们仍在使用版本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 MyScreen extends React.Component {

  static navigationOptions = {
    gesturesEnabled: false
  }

  render() {
    // ...
  }
}

类组件（条件）

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()} />
    )
  }
}