React Native Android - 如何在 StackNavigator 中禁用 android 后退按钮 [英] React Native Android - how to disable android back button in StackNavigator

问题描述

我正在尝试实现锁定屏幕.只有密码正确才返回画面，否则不得退出画面.但是，如果您在 Android 上按返回"按钮，它将始终返回.我尝试使用 BackHandler 但它失败了.它似乎与StackNavigator有关.按下 backButton 时我什么都不做?

I am trying to implement a lock screen. Only when the password is correct does the screen go back, otherwise the screen must not be exited. But if you press the Back button on Android, it will always go back. I tried using BackHandler but it failed. It seems to be related to StackNavigator. How can I do nothing when the backButton is pressed?

import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PINCode from '@haskkor/react-native-pincode';
import { BackHandler } from 'react-native';
import {
  View, Text, Button,
} from 'native-base';
import { NavigationEvents } from 'react-navigation';
import Colors from '../common/Colors';

class LockScreenContainer extends PureComponent {
  static navigationOptions = () => ({
    header: false,
    gesturesEnabled: false,
  });

  finishProcess = async () => {
    const { navigation } = this.props;
    navigation.goBack();
  }

  render() {
    const { navigation,isLock } = this.props;

    return (
      <View style={{ backgroundColor: Colors.GRAY_LV0, justifyContent: 'center', flex: 1 }}>
        <NavigationEvents
          onWillBlur={() => BackHandler.removeEventListener('hardwareBackPress')}
          onWillFocus={() => BackHandler.addEventListener('hardwareBackPress', () => false)}
        />
        <PINCode
          status={isLock ? 'enter' : 'choose'}
          finishProcess={this.finishProcess}
        />
      </View>
    );
  }
}

export default connect(
  state => ({
    isLock: state.lock.isLock,
  }),
  undefined,
)(LockScreenContainer);

insert BackHandler.addEventListener ('hardwareBackPress', () => false) into componentDidMount 也有同样的结果.

insert BackHandler.addEventListener ('hardwareBackPress', () => false) into componentDidMount also has the same result.

推荐答案

您可以执行以下操作

componentWillMount() {
BackHandler.addEventListener('hardwareBackPress', this.backButtonActionCheck);
}

componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress',this.backButtonActionCheck);
}


backButtonActionCheck = () => {
// Your logic to check if user should go back or stay
}

这篇关于React Native Android - 如何在 StackNavigator 中禁用 android 后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！