Bouton de retour Réagir natif de la sortie de l'app

J'ai mis android bouton de retour de quitter l'application de la fonctionnalité dans mon réagir application native de mon écran d'accueil. Mais quand j'appuie sur android bouton de retour sur d'autres écrans, puis aussi il est appelé.

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

InformationsquelleAutor Paras Watts | 2017-09-21

react-native react-native-android

18

Si votre écran d'accueil est toujours monté lorsque vous accédez à d'autres écrans ou tout en démontant le HomeScreen si vous ne retirez pas l'EventListener il sera toujours appelé.

Vous devez supprimer de l'EventListener sur de naviguer ou de le démonter,
```
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);
}
```
- Pas de travail. Toujours à l'affiche dans d'autres écrans
- Pouvez-vous mettre à jour votre question avec le code que vous avez essayé s'il vous plaît.
- L'écran d'accueil est mon écran qui s'ouvre lorsque j'ouvre l'application. Alors voulez de sortie à partir de l'app lorsque je clique sur le bouton de retour. J'ai mis à jour le code
- comme je l'ai dit dans ma réponse, à l'écran d'accueil n'est pas de le démonter, je crois. Si vous appuyez sur les écrans de la pile, l'écran d'accueil sera toujours monté de sorte que votre removeEventListener est de ne jamais les appeler. Essayez de supprimer l'auditeur avant de naviguer vers un autre écran.
- Il y a un problème, j'Ai un tiroir, à partir de laquelle je suis la navigation vers d'autres écrans , le tiroir est d'obtenir des rendus dans un autre fichier et le code de navigation est également dans ce fichier. L'écran d'accueil est rendu ce tiroir composant, mais onpress de la navigation dans la barre latérale de fichier qui rend le tiroir. Comment puis-je gérer cette situation ?
- Merci pour votre aide @bennygenel
- votre accueil. Heureux que ça a aidé.
- si votre navigation logique est dans le Tiroir de la composante ensuite, vous pouvez déplacer le bouton retour des auditeurs pour le Tiroir élément trop. De cette façon, vous pouvez contrôler toutes les applications.
- Il a travaillé dans le faire dans l'écran d'accueil, seulement comme j'ai utilisé une fonction de lier la navigation dans l'écran d'accueil avec tiroir composant
- si cela fonctionne, aucun problème, mais si vous ne l'avez pas déjà, vous pourriez avoir besoin pour gérer la situation où l'utilisateur des terres sur l'écran d'accueil passe à l'autre de l'écran et revient à l'écran d'accueil.
InformationsquelleAutor bennygenel

Si vous ne voulez pas le message d'Alerte à apparaître dans d'autres composants de l'écran, mais seulement dans un composant spécifique de l'écran, vous pouvez suivre ce.

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

La BackHandler qui va afficher un message d'Alerte ne fonctionne que dans TestComponent

Merci beaucoup! Vous avez sauvé ma journée!!! +1 pour vous.
Génial... il a travaillé +1.

InformationsquelleAutor albert

Nous pouvons ajouter abonnements pour didfocus à l'intérieur de notre Application principale Conteneur.Nous pouvons ajouter notre logique pour vérifier bouton tapoté avec un variable statique.

import {  Alert,  BackHandler,  ToastAndroid } from 'react-native';
import {  StackActions } from 'react-navigation';
import { Toast } from 'native-base';
//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
        //);

        //ios & android
        Toast.show({
            text: message,
            type: 'warning',
            position: 'top',
            duration: 3000,
        });
        }

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

    }

InformationsquelleAutor Mukundhan

2

Guyz veuillez faire comprendre qu'il pourrait ne pas être seulement le problème de réagir natif. Soyez prudent tout en l'intégrant avec firebase. La récente firebase version a le problème de l'intégration bouton de retour en réaction à des applications natives!! Merci de déclasser le firebase version de firebase-version @5.0.3 et vérifiez à nouveau si elle fonctionne ou pas! J'ai eu le même problème et a été inquiété pour jours. J'ai finalement déclassé @version 5.0.3 et maintenant le bouton de retour fonctionne parfaitement bien! Vous pouvez rétrograder à la baisse des versions si toujours confronté au problème.
- Il devrait être un commentaire, pas de réponse...
InformationsquelleAutor Rishav Kumar

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

InformationsquelleAutor Nguyễn Phúc

Vous devez vous connecter pour publier un commentaire.