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

【问题标题】：Preventing back behavior of react-navigation StackNavigator防止反应导航 StackNavigator 的后退行为
【发布时间】：2020-02-11 15:52:03
【问题描述】：

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

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

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

【问题讨论】：

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

标签： react-native react-navigation

【解决方案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

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

【讨论】：