React Native之hardwareBackPress
【摘要】 1 hardwareBackPress
我们用hardwareBackPress来监听手机物理返回键
2 js那边常用写法
BackHandler.addEventListener('hardwareBackPress', this._back);
...
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 (
-
<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"/>
-
-
<Button
-
title="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>
-
<Button
-
title="Go to Details... again"
-
onPress={() => this.props.navigation.push('Details', {
-
itemId: Math.floor(Math.random() * 100),
-
})}
-
/>
-
<Button
-
title="Go to Home"
-
onPress={() => this.props.navigation.navigate('Home')}
-
/>
-
<Button
-
title="Go back"
-
onPress={() => this.props.navigation.goBack()}
-
/>
-
<Button
-
title="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 start
-
-
-
-
-
-
-
-
-
10-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监听所执行的函数
文章来源: chenyu.blog.csdn.net，作者：chen.yu，版权归原作者所有，如需转载，请联系作者。
原文链接：chenyu.blog.csdn.net/article/details/83388372
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）