Question

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

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

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

Answer 1

您可以在此处阅读文档

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

 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

Answer 2

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

您可能正在寻找disable android back button

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

Answer 3

这就像您的问题一样

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,
     }
  });

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

3 个答案: