Question

我是本机反应的新手。如何将类组件中的上述代码更改为功能组件。请帮忙。谢谢

import { BackHandler } from 'react-native';

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

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

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

handleBackButtonClick() {
      this.props.navigation.navigate("Browse");

    return true;
}

Answer 1

推荐大家看useEffect(Hooks)的纪录片。现在，这段代码将是从 Class 到 Functional 的转换。如您所见，我们可以在 useEffect 中编写卸载和挂载函数

import { BackHandler } from "react-native";

const MyNewFunctionalComponent = ({ navigation }) => {
  useEffect(() => {
    function handleBackButtonBlick() {
      navigation.goBack();
    }
    BackHandler.addEventListener('hardwareBackPress', handleBackButtonClick);
    return function cleanup() {
      BackHandler.removeEventListener('hardwareBackPress', handleBackButtonClick);
    };
  }, [])

  return (
    // Display what you want here
    null
  )
}

Answer 2

use 可以使用 useEffect 钩子获取 useEffect 中的函数返回函数行为 componentWillUnmount

代码：

function handleBackButtonClick() {
    navigation.goBack(null);
    return true;
}

useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress',handleBackButtonClick);
    return () => {
       BackHandler.removeEventListener('hardwareBackPress',handleBackButtonClick);
    }
}, [])

如何在反应原生中将类组件更改为功能组件

2 个答案: