时间戳

首页 > 解决方案 > React Native 全局后台处理

reactjs - React Native 全局后台处理

问题描述

我有 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

标签： reactjsreact-native

解决方案

根据您的用例，我会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 的工作示例

希望这可以帮助

推荐阅读