Предотвращение обратного поведения реагирующей навигации StackNavigator

Question

Я делаю экран для записи информации. И когда пользователь пытается покинуть экран, я хочу показать подтверждающее сообщение, например:

«Если вы уйдете, информация, которую вы написали, будет утеряна. Вы хотите уйти или остаться?»

И если пользователь решит остаться, Я хочу предотвратить поведение спины навигатора . Как я могу это сделать?

Answer 1

Вы можете прочитать документы здесь

Вам нужно найти способ справиться с нажатой спиной на разных экранах или в глобальном масштабе.

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

Также смотрите официальные документы по реактивной навигации

Дополнительные параметры здесь

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

Answer 3

Не уверен, как работает ваша бизнес-логика " Если пользователь решит остаться, я хочу предотвратить обратное поведение навигатора. Как я могу это сделать? " Что произойдет, если пользователь нажал неправильно? В любом случае ..

Возможно, вы ищете отключить кнопку возврата Android

Исходя из вашей бизнес-логики, я думаю, вы должны отключить кнопку возврата на панели навигации, когда онирешил остаться.