如何在 React Native 中的启动画面后禁用后退按钮

Posted 2023-03-15

【中文标题】如何在 React Native 中的启动画面后禁用后退按钮

【英文标题】：How to disable back button after splash screen in React Native

【发布时间】：2018-12-13 15:06:39

【问题描述】：

在我完成加载启动画面并进入主页面后，我再次按下它以返回启动画面..

问题是如何克服这个问题，这样进入主页后，我无法从手机键盘上的按钮或后退按钮返回启动画面，

提前谢谢..

【问题讨论】：

您如何从启动画面导航到主页？你在使用反应导航吗？一些代码会很有帮助。

我只使用这段代码>> componentWillMount() setTimeout(()=> this.props.navigation.navigate('Home'); , 3000) ====== ================================= 在启动画面消失并且我在主页后，我尝试按下返回按钮再次回到初始屏幕并卡住

【参考方案1】：

只需使用 BackHandler 即可。 文档 https://facebook.github.io/react-native/docs/backhandler

componentDidMount() 
    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
  

  componentWillUnmount() 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
  

  handleBackPress = () => 

    return true;  // Do nothing when back button is pressed
  

【讨论】：

它在每个屏幕上都有效，如何避免这种情况？或者你可以在这里查看***.com/questions/55306718/…

【参考方案2】：

由于您使用的是 expo，这是了解启动画面如何工作的最佳场所。splash-screensapp-loading

【讨论】：

请查看如何回答堆栈溢出问题

【参考方案3】：

我想您正在使用堆栈导航器。将其更改为切换导航器，按返回时您将不会导航到上一个屏幕。

这是一个基本的工作示例：

https://snack.expo.io/@sanjar/so-53764740

ps：在这个例子中，我使用的是 react-navigation 2（最新版本是 3）。

【讨论】：

但我应该在哪里使用它？在 app.js 或 splash.js 中？

我只使用这段代码>> componentWillMount() setTimeout(()=> this.props.navigation.navigate('Home'); , 3000) ====== ==================================== 我使用此代码重定向到主页