react-native
Android - हार्डवेयर बैक बटन

Android में हार्डवेयर बैक बटन दबाएं

BackAndroid.addEventListener('hardwareBackPress', function() {
    if (!this.onMainScreen()) {
        this.goBack();
        return true;
    }
    return false;
});

नोट: this.onMainScreen() और this.goBack() फ़ंक्शंस में नहीं बने हैं, आपको उन्हें लागू करने की भी आवश्यकता है। ( https://github.com/immidi/react-native/commit/ed7e0fb31d842c63e8b8dc77ce795fac86e0f712)

नेविगेटर के साथ BackAndroid का उदाहरण

यह एक उदाहरण है कि कैसे Navigator के साथ-साथ BackAndroid का उपयोग किया BackAndroid ।

componentWillMount WillMount एक घटना श्रोता को पीछे बटन पर नल को संभालने के लिए पंजीकृत करता है। यह जांचता है कि क्या इतिहास स्टैक में एक और दृश्य है, और यदि कोई है, तो यह वापस -संतोष कर जाता है, यह डिफ़ॉल्ट व्यवहार रखता है।

BackAndroid डॉक्स और Navigator डॉक्स पर अधिक जानकारी।

import React, { Component } from 'react'; // eslint-disable-line no-unused-vars

import {
  BackAndroid,
  Navigator,
} from 'react-native';

import SceneContainer from './Navigation/SceneContainer';
import RouteMapper from './Navigation/RouteMapper';

export default class AppContainer extends Component {

  constructor(props) {
    super(props);

    this.navigator;
  }

  componentWillMount() {
    BackAndroid.addEventListener('hardwareBackPress', () => {
      if (this.navigator && this.navigator.getCurrentRoutes().length > 1) {
        this.navigator.pop();
        return true;
      }
      return false;
    });
  }

  renderScene(route, navigator) {
    this.navigator = navigator;

    return (
      <SceneContainer
        title={route.title}
        route={route}
        navigator={navigator}
        onBack={() => {
          if (route.index > 0) {
            navigator.pop();
          }
        }}
        {...this.props} />
    );
  }

  render() {
    return (
      <Navigator
        initialRoute={<View />}
        renderScene={this.renderScene.bind(this)}
        navigationBar={
          <Navigator.NavigationBar
            style={{backgroundColor: 'gray'}}
            routeMapper={RouteMapper} />
        } />
    );
  }
};

BackHandler का उपयोग करके हार्डवेयर बैक बटन डिटेक्शन का उदाहरण

चूंकि बैकएंड्रॉइड को पदावनत किया गया है। BackAndroid के बजाय BackHandler का उपयोग करें।

import { BackHandler } from 'react-native';

{...}
  ComponentWillMount(){
    BackHandler.addEventListener('hardwareBackPress',()=>{   
      if (!this.onMainScreen()) {
        this.goBack();
        return true;
      }
      return false;
    });
  }    

बैकहैंडलर और नेविगेशन गुणों का उपयोग करते हुए हार्डवेयर बैक बटन हैंडलिंग (बिना अपग्रेड किए गए बैकएंड्रॉइड और अपग्रेडेड नेविगेटर का उपयोग किए बिना)

यह उदाहरण आपको वापस नेविगेशन दिखाएगा जो आम तौर पर अधिकांश प्रवाह में होने की उम्मीद है। अपेक्षित व्यवहार के आधार पर आपको हर स्क्रीन पर निम्नलिखित कोड जोड़ना होगा। 2 मामले हैं:

1. यदि स्टैक पर 1 से अधिक स्क्रीन हैं, तो डिवाइस बैक बटन पिछली स्क्रीन दिखाएगा।
2. यदि स्टैक पर केवल 1 स्क्रीन है, तो डिवाइस बैक बटन ऐप से बाहर निकल जाएगा।

केस 1: पिछली स्क्रीन दिखाएं

import { BackHandler } from 'react-native';

constructor(props) {
    super(props)
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
}

componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
}

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

handleBackButtonClick() {
    this.props.navigation.goBack(null);
    return true;
}

महत्वपूर्ण: कंस्ट्रक्टर में विधि को बाँधना और कंपोनेंटविलीयूएनमाउंट में श्रोता को हटाना न भूलें।

केस 2: ऐप से बाहर निकलें

इस मामले में, उस स्क्रीन पर कुछ भी संभालने की आवश्यकता नहीं है जहां आप ऐप से बाहर निकलना चाहते हैं।

महत्वपूर्ण: यह केवल स्टैक पर स्क्रीन होना चाहिए।