本文共 6079 字，大约阅读时间需要 20 分钟。

1  hardwareBackPress

我们用hardwareBackPress来监听手机物理返回键

2 js那边常用写法

BackHandler.addEventListener('hardwareBackPress', this._back);

3  我们看下Android源代码分析是怎么触发到这里来的

1) ReactActivity.java里面的部分代码如下

@Override  public void onBackPressed() {    if (!mDelegate.onBackPressed()) {      super.onBackPressed();    }  }

2 ) 进入onBackPressed()函数看看,在ReactActivityDelegate.java文件里面

public boolean onBackPressed() {    if (getReactNativeHost().hasInstance()) {      getReactNativeHost().getReactInstanceManager().onBackPressed();      return true;    }    return false;  }

3)再次点击onBackPressed函数进去看下

public void onBackPressed() {    UiThreadUtil.assertOnUiThread();    ReactContext reactContext = mCurrentReactContext;    if (reactContext == null) {      // Invoke without round trip to JS.      FLog.w(ReactConstants.TAG, "Instance detached from instance manager");      invokeDefaultOnBackPressed();    } else {      DeviceEventManagerModule deviceEventManagerModule =        reactContext.getNativeModule(DeviceEventManagerModule.class);      deviceEventManagerModule.emitHardwareBackPressed();    }  }

4) 进到emitHardwareBackPressed函数里面看下

/**   * Sends an event to the JS instance that the hardware back has been pressed.   */  public void emitHardwareBackPressed() {    getReactApplicationContext()        .getJSModule(RCTDeviceEventEmitter.class)        .emit("hardwareBackPress", null);  }

这里发现了Android原生向js发送了消息,所以我们监听hardwareBackPress就有反映

4 测试代码如下

App.js文件如下

import React from 'react';import { View, Text, Button, NativeModules, BackHandler} from 'react-native';import { createStackNavigator } from 'react-navigation';var toast = NativeModules.MyToast;class HomeScreen extends React.Component {   constructor(props) {	super(props);	console.log("HomeScreen constructor start");    }    static navigationOptions = {        title : 'HomeScreen',    }	    componentDidMount = () => {        this.didFocusListener = this.props.navigation.addListener(		'didFocus',		(obj) => {			console.log("HomeScreen didFocus start");			BackHandler.addEventListener('hardwareBackPress', this._back);					}	);	this.didBlurListener = this.props.navigation.addListener(		'didBlur',		(obj) => {console.log('HomeScreen didBlur start')}		);                console.log("HomeScreen componentDidMount start")    }    componentWillUnmount() {		console.log("HomeScreen componentWillUnmount start")		this.didFocusListener.remove();		this.didBlurListener.remove();    }            render() {		var testID = 'chenyu';        return (            
                  
    
      this._goto()}>Home Screen
                   
     this.props.navigation.navigate('Details', {                   itemId:100,                   otherParam:'chenyu',               })} title = "go to Details"/>                 
     this.props.navigation.goBack()}              />            );    }	_show(value) {		console.log(value);		}	_goto = () => {	    toast.show();		}	_back = () => {		console.log("home back");		}}class DetailsScreen extends React.Component {   constructor(props) {	super(props);	console.log("DetailsScreen constructor start");        this.didFocusListener = this.props.navigation.addListener(		'didFocus',		(obj) => {			console.log("DetailsScreen didFocus start");            BackHandler.addEventListener('hardwareBackPress', this._back);					    }	);	this.didBlurListener = this.props.navigation.addListener(		'didBlur',		(obj) => {console.log('DetailsScreen didBlur start')}	);    }	_back = () => {		console.log("detail back");		}    static navigationOptions = ({navigation}) => {        return {            title : navigation.getParam('otherParam', 'no-values'),        };    };    componentDidMount = () => {        console.log("DetailsScreen componentDidMount start")    }    componentWillUnmount() {	console.log("DetailsScreen componentWillUnmount start")        this.didFocusListener.remove();	this.didBlurListener.remove();    }    render() {        const {navigation} = this.props;        const itemId = navigation.getParam('itemId', 'no-values');        const otherParam = navigation.getParam('otherParam', 'no-values');        return (            
     	    	
      
       Details Screen
      		
      
       itemId:{JSON.stringify(itemId)}
      		
      
       otherParam:{JSON.stringify(otherParam)}
      		
     
     this.props.navigation.push('Details', {		    	itemId: Math.floor(Math.random() * 100),		})}		/>		
     this.props.navigation.navigate('Home')}		/> 		
     this.props.navigation.goBack()}		/>		
     this.props.navigation.popToTop()}		/>                  );    }}const RootStack = createStackNavigator(    {        Home: HomeScreen,        Details: DetailsScreen,    },    {        initialRouteName: 'Home',    });export default class App extends React.Component {    constructor(props) {	super(props);    }    render() {        return 
     ;    }}
   

5 运行结果

点击主界面的GO TO DETAILS,进入详细页面,然后分别按下2次back键,日志如下

10-27 23:39:32.498   917  1031 I ReactNativeJS: detail back10-27 23:39:32.498   917  1031 I ReactNativeJS: home back10-27 23:39:32.784   917  1031 I ReactNativeJS: DetailsScreen componentWillUnmount start10-27 23:39:32.790   917  1031 I ReactNativeJS: HomeScreen didFocus start10-27 23:39:51.164   917  1031 I ReactNativeJS: detail back10-27 23:39:51.165   917  1031 I ReactNativeJS: home back10-27 23:39:51.165   917  1031 I ReactNativeJS: detail back10-27 23:39:51.165   917  1031 I ReactNativeJS: home back10-27 23:39:51.165   917  1031 I ReactNativeJS: detail back10-27 23:39:51.165   917  1031 I ReactNativeJS: home back10-27 23:39:51.165   917  1031 I ReactNativeJS: home back10-27 23:39:51.165   917  1031 I ReactNativeJS: detail back10-27 23:39:51.166   917  1031 I ReactNativeJS: detail back10-27 23:39:51.166   917  1031 I ReactNativeJS: home back10-27 23:39:51.166   917  1031 I ReactNativeJS: detail back10-27 23:39:51.166   917  1031 I ReactNativeJS: home back10-27 23:39:51.166   917  1031 I ReactNativeJS: home back10-27 23:39:51.621   917  1031 I ReactNativeJS: HomeScreen componentWillUnmount start

我们点击标题栏的返回按钮,和点击GO BACK,执行this.props.navigation.goBack()方法,都不会触发hardwareBackPress监听所执行的函数

转载地址：https://chenyu.blog.csdn.net/article/details/83388372 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！