reactjs - React Native 全局后台处理

Question

我有 3 个组件：

1. 组分A
2. 组分B
3. BackPressHandlingComponent

BackPressHandlingComponent处理背压。

当从 ComponentA 回压时；我必须退出应用程序。

当从 ComponentB 反压时；我必须去ComponentA。

这是我的 BackPressHandlingComponent 代码 -

import { BackHandler } from 'react-native';

export class BackPressHandlingComponent extends Component {
    componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
    }

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

我的问题是——

如何告诉组件 A 的 BackPressHandlingComponent 我必须退出应用程序，以及我需要返回组件 A 的组件 B

Answer 1

根据您的用例，我会Backpress event listeners在 ComponentA 和 ComponentB 上添加，这样当您在 ComponentA 上调用回调时，您可以退出应用程序，而在 ComponentB 中调用其回调时，您可以导航到 ComponentA。

上述解决方案的简单演示：

应用程序.js

/**
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
import ComponentA from './ComponentA'
import ComponentB from './ComponentB'
import BackHandlerHOC from './BackHandlerHOC'

type Props = {};
export default class App extends Component<Props> {
  state = {
    render: 'A'
  }

  toggleComponent = () => {
    let component = 'A'
    if (this.state.render === 'A') {
      component = 'B'
    }
    this.setState({ render: component })
  }

  render() {
    const { render } = this.state
    const wrappercomponent = render === 'A' ? (
      <BackHandlerHOC
        name="ComponentA"
        Component={ComponentA}
      />
    ) : (
        <BackHandlerHOC
          name="ComponentB"
          Component={ComponentB}
        />
      )
    return (
      <View style={styles.container}>
        <TouchableOpacity
          onPress={() => this.toggleComponent()}
        >
          <Text> Change </Text>
        </TouchableOpacity>
        {wrappercomponent}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 20
  }
})

组分A

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

class ComponentA extends Component {
  render() {
    return (
      <View>
        <Text>A</Text>
      </View>
    );
  }
}

export default ComponentA;

组分B

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

class ComponentB extends Component {
  render() {
    return (
      <View>
        <Text>B</Text>
      </View>
    );
  }
}

export default ComponentB;

BackHandlerHOC

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

class BackHandlerHOC extends Component {
  componentDidMount = () => {
    BackHandler.addEventListener('hardwareBackPress', this.backPressHandler);
  };

  componentWillUnmount = () => {
    BackHandler.removeEventListener('hardwareBackPress', this.backPressHandler);
  };

  backPressHandler = () => {
    const { name } = this.props;
    if (name === 'ComponentA') {
      BackHandler.exitApp()
    } else {
      // this.props.navigator.resetTo({
      //   screen: 'ComponentA'
      // })
      ToastAndroid.show('will go back to A', 0);
    }
    return true;
  };

  render() {
    const { Component } = this.props;
  return (
    <View>
      <Text>Hello from backpress</Text>
      <Component />
    </View>
);
  }
}

export default BackHandlerHOC;

您还可以在此处找到有关 expo 的工作示例

希望这可以帮助

Answer 2

只是为了添加另一种方法，我利用了react-navigation生命周期事件和hardwareBackPress事件，请注意这里的版本react-navigation是3.x.x.

生命周期事件onWillFocus在屏幕出现时被调用，生命周期事件onWillBlur在用户移动到另一个屏幕时被调用，这里不知何故 React 生命周期事件在手中react-navigation，因此不能在此处使用它们，请参见https：/ /reactnavigation.org/docs/3.x/navigation-lifecycle。

以下是代码：

import { BackHandler,Alert } from "react-native";
import { NavigationEvents } from 'react-navigation';
class SomeComponent {
             //...my componentDidMount etc and other methods..... 

   backButtonAction(){
            Alert.alert(
            "Confirm Exit",
            "Do you want to exit the app?",
            [
              {
                text: "No",
                onPress: () => {},
                style: "cancel"
              },
              { text: "Yes", onPress: () => BackHandler.exitApp() }
            ],
            { cancelable: false }
          );
          return true; // coz the event handler needs to return boolean.
        };  
  setBackButtonAction(){
        BackHandler.addEventListener(
                        "hardwareBackPress",
                        this.backButtonAction
                      );
  }
  removeBackButtonAction(){
        BackHandler.removeEventListener(
                      "hardwareBackPress",
                      this.backButtonAction
                    );
  }
  render() {
                    return (
                          <Container>
                            <NavigationEvents
                            onWillFocus={payload => this.setBackButtonAction()}
                            onWillBlur={payload => this.removeBackButtonAction()}
                            /> //..... my view code
                          </Container>)
          }
    }