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監聽所執行的函數

?

總結

以上是生活随笔為你收集整理的React Native之hardwareBackPress的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。