[英]React-native android back button in react-navigation
Well, I have a react-native
app with multiple screen, each screen having a top bar where a back button is situated, it's main behavior is that the app returns to the main screen when this button is pressed.好吧,我有一个带有多个屏幕的react-native
应用程序,每个屏幕都有一个顶部栏,其中有一个后退按钮,它的主要行为是当按下此按钮时应用程序返回到主屏幕。 What I want to do is to copy this behavior to the hardware back button (now by pressing on hardware back button the app closes), how can I do this?我想要做的是将此行为复制到硬件后退按钮(现在通过按下硬件后退按钮关闭应用程序),我该怎么做?
UPDATE:更新:
I'm using react-navigation
and redux
我正在使用react-navigation
和redux
You can:你可以:
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
在componentDidMount中添加(componentWillMount已弃用) BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
handleBackButton(){ this.props.navigation.popToTop(); return true; }
像这样实现handleBackButton handleBackButton(){ this.props.navigation.popToTop(); return true; }
handleBackButton(){ this.props.navigation.popToTop(); return true; }
popToTop goes back to the first screen in the stack. popToTop 返回堆栈中的第一个屏幕。
If you are using react-navigation with Redux you should implement the popToTop as an action to dispatch.如果您在 Redux 中使用 react-navigation,您应该将 popToTop 实现为要调度的操作。
You can do it by below example你可以通过下面的例子来做
import { BackHandler } from 'react-native';
class App extends Component {
constructor(props){
super(props);
this.backButtonClick = this.backButtonClick.bind(this);
}
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.backButtonClick);
}
componentWillUnmount(){
BackHandler.removeEventListener('hardwareBackPress', this.backButtonClick);
}
backButtonClick(){
if(this.props.navigation && this.props.navigation.goBack){
this.props.navigation.goBack(null);
return true;
}
return false;
}
}
So if you are using react-navigation
and redux
, you can take a look at docs - Handling the Hardware Back Button in Android因此,如果您正在使用react-navigation
和redux
,您可以查看文档 - 在 Android 中处理硬件后退按钮
YourComponent.js:你的组件.js:
import React from "react";
import { BackHandler } from "react-native";
import { NavigationActions } from "react-navigation";
/* your other setup code here! this is not a runnable snippet */
class ReduxNavigation extends React.Component {
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
}
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
}
onBackPress = () => {
const { dispatch, nav } = this.props;
if (nav.index === 0) {
return false;
}
dispatch(NavigationActions.back());
return true;
};
render() {
/* more setup code here! this is not a runnable snippet */
return <AppNavigator navigation={navigation} />;
}
}
Import this package导入这个包
import { BackHandler } from "react-native";
Bind the function in the constructor在构造函数中绑定函数
this.exitApp = this.exitApp.bind(this);
Your back button你的后退按钮
<Button transparent onPress={this.exitApp}>
<Icon name="arrow-back" />
</Button>
Handle back press and close the app处理后按并关闭应用程序
exitApp() {
BackHandler.exitApp()
}
// Add the listener when the page is ready
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.exitApp);
}
// Remove the listener before removing
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.exitApp);
}
The way of displaying the button might be different but this will work!显示按钮的方式可能会有所不同,但这会起作用! If any issue write in the comments.如果有任何问题写在评论中。
Implementation with react Hooks in functional components:在功能组件中使用 react Hooks实现:
useEffect(() => {
function handleBackButton() {
navigation.navigate('register-phone');
return true;
}
const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackButton);
return () => backHandler.remove();
}, [navigation]);
don't forget to remove the listener on Unmount.不要忘记在卸载时删除侦听器。
based on the react-native documentation .基于react-native 文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.