1 hardwareBackPress
我们用hardwareBackPress来监听手机物理返回键
2 js那边常用写法
BackHandler.addEventListener('hardwareBackPress', this._back);
3 我们看下Android源代码分析是怎么触发到这里来的
1) ReactActivity.java里面的部分代码如下
@Overridepublic 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 (<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}><Text testID = {testID} onPress = {() => this._goto()}>Home Screen</Text><Button onPress={() => this.props.navigation.navigate('Details', {itemId:100,otherParam:'chenyu',})} title = "go to Details"/><Buttontitle="Go back"onPress={() => this.props.navigation.goBack()}/></View>);}_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 (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text>Details Screen</Text><Text>itemId:{JSON.stringify(itemId)}</Text><Text>otherParam:{JSON.stringify(otherParam)}</Text><Buttontitle="Go to Details... again"onPress={() => this.props.navigation.push('Details', {itemId: Math.floor(Math.random() * 100),})}/><Buttontitle="Go to Home"onPress={() => this.props.navigation.navigate('Home')}/> <Buttontitle="Go back"onPress={() => this.props.navigation.goBack()}/><Buttontitle="Go popToTop"onPress={() => this.props.navigation.popToTop()}/></View>);}
}const RootStack = createStackNavigator({Home: HomeScreen,Details: DetailsScreen,},{initialRouteName: 'Home',}
);export default class App extends React.Component {constructor(props) {super(props);}render() {return <RootStack/>;}}
5 运行结果
点击主界面的GO TO DETAILS,进入详细页面,然后分别按下2次back键,日志如下
10-27 23:39:32.498 917 1031 I ReactNativeJS: detail back
10-27 23:39:32.498 917 1031 I ReactNativeJS: home back
10-27 23:39:32.784 917 1031 I ReactNativeJS: DetailsScreen componentWillUnmount start
10-27 23:39:32.790 917 1031 I ReactNativeJS: HomeScreen didFocus start10-27 23:39:51.164 917 1031 I ReactNativeJS: detail back
10-27 23:39:51.165 917 1031 I ReactNativeJS: home back
10-27 23:39:51.165 917 1031 I ReactNativeJS: detail back
10-27 23:39:51.165 917 1031 I ReactNativeJS: home back
10-27 23:39:51.165 917 1031 I ReactNativeJS: detail back
10-27 23:39:51.165 917 1031 I ReactNativeJS: home back
10-27 23:39:51.165 917 1031 I ReactNativeJS: home back
10-27 23:39:51.165 917 1031 I ReactNativeJS: detail back
10-27 23:39:51.166 917 1031 I ReactNativeJS: detail back
10-27 23:39:51.166 917 1031 I ReactNativeJS: home back
10-27 23:39:51.166 917 1031 I ReactNativeJS: detail back
10-27 23:39:51.166 917 1031 I ReactNativeJS: home back
10-27 23:39:51.166 917 1031 I ReactNativeJS: home back
10-27 23:39:51.621 917 1031 I ReactNativeJS: HomeScreen componentWillUnmount start
我们点击标题栏的返回按钮,和点击GO BACK,执行this.props.navigation.goBack()方法,都不会触发hardwareBackPress监听所执行的函数
用法)
