Question

我正在努力应对原生Android并面临硬件返回按钮的问题我的反应原生版本是0.44.2而我在下面使用BackHandler是我的后退按钮代码：

BackHandler.addEventListener("hardwareBackPress", () => {
  if (this.navigator && this.navigator.getCurrentRoutes().length > 1){this.navigator.pop()
return true // do not exit app
} else {
return false // exit app
}})

我收到以下错误：

Answer 1

使用BackAndroid。
你需要在构造函数中绑定函数或者这个＆＃39;将是未定义的

import{ BackAndroid } from 'react-native';

constructor(props){
    super(props)
    this._handleBackPress = this._handleBackPress.bind(this);
}

    componentDidMount(){
            BackAndroid.addEventListener('hardwareBackPress',this._handleBackPress);
      }

      componentWillUnmount(){
        // to remove the back listener
        BackAndroid.removeEventListener('hardwareBackPress', this._handleBackPress);
      }

  _handleBackPress(){
   //write logic here
  }

Answer 2

您需要使用React Native的import React from 'react' import { ScrollView, Text, View, Switch } from 'react-native' class switchScreen extends React.Component { constructor (props) { super(props) this.state = { switchone:false, switchtwo:false, switchthree:false, } } switchOne = (value) => { this.setState({ switchone: !value, switchtwo:false,switchthree:false, }) } switchTwo = (value) => { this.setState({ switchtwo: !value, switchone:false,switchthree:false, }) } switchThree = (value) => { this.setState({ switchtree: !value, switchone:false,switchtwo:false, }) } render () { return ( <View> <Switch onValueChange={this.switchOne} value={this.state.switchone} /> <Switch onValueChange={this.switchTwo} value={this.state.switchtwo} /> <Switch onValueChange={this.switchThree} value={this.state.switchthree} /> </View> ) } } API。

BackAndroid

Answer 3

您可以使用自动处理硬件的React-Navigation。如果您使用它进行导航。

Answer 4

创建新文件：

import {BackHandler} from 'react-native';
/**
 * Attaches an event listener that handles the android-only hardware
 * back button
 * @param  {Function} callback The function to call on click
 */
const handleAndroidBackButton = (callback: any) => {
    BackHandler.addEventListener('hardwareBackPress', () => {
        callback();
    });
};
/**
 * Removes the event listener in order not to add a new one
 * every time the view component re-mounts
 */
const removeAndroidBackButtonHandler = () => {
    BackHandler.removeEventListener('hardwareBackPress', () => {});
};
export {handleAndroidBackButton, removeAndroidBackButtonHandler};

，然后在您的主渲染文件（app.tsx）中添加以下代码：

  import {handleAndroidBackButton, removeAndroidBackButtonHandler} from "./utils/back-button.handler";
  public componentDidMount(): void {
        handleAndroidBackButton(false);
    }

Answer 5

import { BackHandler, View, Text, } from 'react-native';
import React, { Component } from 'react';

export default class App extends Component {
    constructor(props) {
        super(props)
        this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
    }

    componentDidMount() {
        try {
            BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
        }
        catch (e) {

        }
    };

    componentWillUnmount() {
        try {
            BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
        }
        catch (e) {

        }
    };
    handleBackButtonClick() {
        try {
            this.props.navigation.navigate('Home');
            return true;
        }
        catch (e) {

        }
    };

    render() {
        return (
            <View style={{ flex: 1, textAlign: "center" }}>
                <Text>Hardware back button Example</Text>
            </View>
        )
    }
};

此解决方案对我有用。在-----------------中，请将您的屏幕名称添加到要导航的位置。

React本机硬件后退按钮不起作用

5 个答案: