防止反应导航 StackNavigator 的后退行为

Posted 2023-04-13

【中文标题】防止反应导航 StackNavigator 的后退行为

【英文标题】：Preventing back behavior of react-navigation StackNavigator

【发布时间】：2020-02-11 15:52:03

【问题描述】：

我正在制作用于写一些信息的屏幕。当用户尝试离开屏幕时，我想显示如下确认消息：

“如果你离开，你写的信息会丢失。你想离开还是留下？”

如果用户选择留下，我想防止导航器的后退行为。我该怎么做？

【问题讨论】：

为此要使用硬件返回（android）或自定义返回按钮（由您创建）？

【参考方案1】：

您可以在此处阅读文档

您需要找到一种方法来处理不同屏幕或全局的后按。

react-navigation-backhandler 是一个快速的方法。

 import  AndroidBackHandler  from 'react-navigation-backhandler';

 class SomeComponent extends React.Component   
 onBackButtonPressAndroid = () => 
     /*
     *   Returning `true` from `onBackButtonPressAndroid` denotes that we have handled the event,
     *   and react-navigation's lister will not get called, thus not popping the screen.
     *
     *   Returning `false` will cause the event to bubble up and react-navigation's listener will pop the screen.
     * */

     if (youWantToHandleTheBackButtonPress) 
       // do something
       return true;
     
     return false;   ;

   render() 
     return (
       <AndroidBackHandler onBackPress=this.onBackButtonPressAndroid>
         <BodyOfYourScreen />
       </AndroidBackHandler>
     );   

也可以关注官方react-navigation docs

更多选项here

【参考方案2】：

这和你的问题一样，

import React, Component from 'react';
import StyleSheet, Text, View,BackHandler,Alert,Modal,TouchableOpacity,TextInput from 'react-native';

export default class App extends Component 

state=
  modalVisible:false,
 

componentDidMount()

BackHandler.addEventListener("hardwareBackPress",
 this.backpress,this.backHandler)
 

backpress=()=>
  this.setState(modalVisible:!this.state.modalVisible)

  return true;
 

backHandler=()=>
  BackHandler.exitApp()


render() 
 return (
  <View style=styles.container>
     <TextInput
          style=height: 40,width:200,marginLeft:50,marginVertical:20,borderBottomWidth:1
          placeholder="Mobile Number"
          onChangeText=(mobilenumber) => this.setState(mobilenumber)
        />
        <Modal
          animationType="slide"
          transparent=true
          visible=this.state.modalVisible
          onRequestClose=() => 
          Alert.alert('Modal has been closed.');
          >          
       <View style=flex:1,justifyContent:'center',alignItems:'center',
  backgroundColor:'rgba(52,52,52,0.5)'>

   <View style=width:300,height:250,backgroundColor:'#FFF',padding:20,
   borderRadius:20,alignItems:'center',justifyContent:'center'>

      <Text style=fontSize:20,color:'black',alignSelf:'center'>Are you sure to EXIT</Text>
                <View style=flexDirection:'row'>
                  <TouchableOpacity onPress=()=>this.backpress()
                  style=padding:10,marginHorizontal:10 ,backgroundColor:'#0596C5',alignItems:'center',justifyContent:'center',borderRadius:20>
                    <Text style=color:'white',padding:5>STAY</Text>
                  </TouchableOpacity>

                  <TouchableOpacity onPress=()=>this.backHandler()
                  style=padding:10,marginHorizontal:10 ,backgroundColor:'red',alignItems:'center',justifyContent:'center',borderRadius:20>
                    <Text style=color:'#FFF',padding:5>EXIT</Text>
                  </TouchableOpacity>
                </View>
               </View>

            </View>

       </Modal>
   </View>
   );
   
  

  const styles = StyleSheet.create(
   container: 
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: '#F5FCFF',
      ,
    welcome: 
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
     
  );

【参考方案3】：

不确定你的业务逻辑是如何工作的“如果用户选择留下来，我想防止导航器的后退行为。我该怎么做？” 如果用户按错了会发生什么？反正..

您可能正在寻找disable android back button

根据您的业务逻辑，我认为当他们决定留下时，您也应该禁用导航栏上的后退按钮。