wake-up-neo.com

Zurück-Schaltfläche Reagieren Sie die native Beendigungs-App

Ich habe die Android-Zurück-Schaltfläche zum Beenden der App-Funktionalität in meiner reaktiven App auf meinem Startbildschirm gesetzt. Wenn ich aber auf anderen Bildschirmen die Android-Zurück-Taste drücke, wird es auch gerufen.

componentDidMount() {

    if (Platform.OS == "Android") {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);                           
  }
    this._setupGoogleSignin();           
    this._getUserDetails();
    const { navigate } = this.props.navigation;
    console.log("object url is", this.state.postsArray[0].url);

}

handleBackButton = () => {               
    Alert.alert(
        'Exit App',
        'Exiting the application?', [{
            text: 'Cancel',
            onPress: () => console.log('Cancel Pressed'),
            style: 'cancel'
        }, {
            text: 'OK',
            onPress: () => BackHandler.exitApp()
        }, ], {
            cancelable: false
        }
     )
     return true;
   }
componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
  }
react-nativereact-native-android
11
Paras Watts

Wenn Ihr HomeScreen immer noch eingehängt ist, wenn Sie zu anderen Bildschirmen navigieren oder die HomeScreen abnehmen, wenn Sie den EventListener nicht entfernen, wird er weiterhin aufgerufen.

Sie sollten den EventListener beim Navigieren oder Aufheben der Bereitstellung deaktivieren.

onButtonPress = () => {
  BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
  // then navigate
  navigate('NewScreen');
}

handleBackButton = () => {
 Alert.alert(
     'Exit App',
     'Exiting the application?', [{
         text: 'Cancel',
         onPress: () = > console.log('Cancel Pressed'),
         style: 'cancel'
     }, {
         text: 'OK',
         onPress: () = > BackHandler.exitApp()
     }, ], {
         cancelable: false
     }
  )
  return true;
} 

componentDidMount() {
  BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}

componentWillUnmount() {
  BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}
14
bennygenel

Guyz, bitte verstehen Sie, es kann nicht nur das Problem sein, mit dem native reagieren. Seien Sie vorsichtig, wenn Sie es mit Firebase integrieren. Die neueste Firebase-Version hat das Problem, dass die Schaltfläche "Zurück" in reaktiöse Apps integriert werden kann !! Downgrade der Firebase-Version auf Firebase-Version @ 5.0.3 und dann erneut prüfen, ob sie funktioniert oder nicht! Ich hatte das gleiche Problem und war tagelang besorgt. Ich habe endlich auf die Version 5.0.3 heruntergestuft und jetzt funktioniert der Zurück-Button einwandfrei! Sie können ein Downgrade auf niedrigere Versionen durchführen, wenn das Problem weiterhin besteht.

2
Rishav Kumar

Wir könnensubscriptionsfordidfocusin unserem Haupt-App-Container hinzufügen. Wir können unsere Logik hinzufügen, um zu prüfen, ob mit einerstatic-Variablegetippt wird .

import {  Alert,  BackHandler,  ToastAndroid } from 'react-native';
import {  StackActions } from 'react-navigation';
// common statless class variable.
let backHandlerClickCount = 0;

class App extends React.Component {
    constructor(props) {
      super(props);
      // add listener to didFocus
      this._didFocusSubscription = props.navigation.addListener('didFocus', payload =>
        BackHandler.addEventListener('hardwareBackPress', () => this.onBackButtonPressAndroid(payload)));
    }

    // remove listener on unmount 
    componentWillUnmount() {
      if (this._didFocusSubscription) {
        this._didFocusSubscription.remove();
      }
    }

    onBackButtonPressAndroid = () => {
      const shortToast = message => {
        ToastAndroid.showWithGravityAndOffset(
          message,
          ToastAndroid.SHORT,
          ToastAndroid.BOTTOM,
          25,
          50
        );

        const {
          clickedPosition
        } = this.state;
        backHandlerClickCount += 1;
        if ((clickedPosition !== 1)) {
          if ((backHandlerClickCount < 2)) {
            shortToast('Press again to quit the application!');
          } else {
            BackHandler.exitApp();
          }
        }

        // timeout for fade and exit
        setTimeout(() => {
          backHandlerClickCount = 0;
        }, 2000);

        if (((clickedPosition === 1) &&
            (this.props.navigation.isFocused()))) {
          Alert.alert(
            'Exit Application',
            'Do you want to quit application?', [{
              text: 'Cancel',
              onPress: () => console.log('Cancel Pressed'),
              style: 'cancel'
            }, {
              text: 'OK',
              onPress: () => BackHandler.exitApp()
            }], {
              cancelable: false
            }
          );
        } else {
          this.props.navigation.dispatch(StackActions.pop({
            n: 1
          }));
        }
        return true;
      }

    }
2
Mukundhan
BackHandler.addEventListener('hardwareBackPress', function() {
    Alert.alert(
      'Thoát Khỏi Ứng Dụng',
      'Bạn có muốn thoát không?', [{
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel'
      }, {
          text: 'OK',
          onPress: () => BackHandler.exitApp()
      }, ], {
          cancelable: false
      }
   )
   return true;
})
0
Nguyễn Phúc

Wenn Sie nicht möchten, dass die Warnmeldung in einer anderen Komponente/einem anderen Bildschirm angezeigt wird, sondern nur in einer bestimmten Komponente/einem bestimmten Bildschirm, können Sie dem folgen.

import { withNavigationFocus } from 'react-navigation';

class TestComponent extends Component {
  componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
  }

  handleBackButton = () => {
    if (this.props.isFocused) {
      Alert.alert(
        'Exit App',
        'Exiting the application?',
        [
          {
            text: 'Cancel',
            onPress: () => console.log('Cancel Pressed'),
            style: 'cancel'
          },
          {
            text: 'OK',
            onPress: () => BackHandler.exitApp()
          }
        ],
        {
          cancelable: false
        }
      );
      return true;
    }
  };
} 

export default withNavigationFocus(TestComponent );

Der BackHandler, der eine Warnmeldung anzeigt, funktioniert nur in TestComponent

0
albert

Sie können jederzeit dynamisch ändern, was die Rückruffunktion für das BackHandler.addEventListener basiert auf der aktuellen Szene (mit react-native-router-flux macht das einfach).

import { Actions } from 'react-native-router-flux'

handleBackPress = () => {
 switch (Actions.currentScene) {
   case 'home':
     BackHandler.exitApp()
     break

   default: Actions.pop()
 }

 return true
}

Den vollständigen Inhalt finden Sie hier: https://Gist.github.com/omeileo/f05a068557e9f0a2d8a24ecccd2f3177

0
Jase-Omeileo West