如何在不修改子组件的情况下处理React Native Wizard组件的硬件返回键导航

问题背景 #

我正在开发一个React Native项目，其中包含一个自定义Wizard组件用于表单分步导航，父组件中使用方式如下：

<Wizard
  activePage={activePage}
  steps={[
    {number: 1, title: 'Resume Header'},
    {number: 2, title: 'Experience'},
    {number: 3, title: 'Education'},
    {number: 4, title: 'Skills and Details'},
  ]}
  onStepPress={handleStepPress}
/>

需求是按下Android硬件返回键时，回到Wizard的上一步（比如第2步返回第1步）。

现有方案的问题 #

之前的实现需要修改Wizard组件，通过父组件传入backHandler props并在子组件中注册返回键监听，导致Wizard组件和返回键逻辑强耦合，破坏了组件的通用性和可复用性。

优化方案：父组件独立处理返回键逻辑 #

完全不需要修改Wizard组件，直接在父组件中完成返回键的监听和逻辑处理即可，代码如下：

父组件代码 #

import React, { useState, useEffect } from 'react';
import { BackHandler } from 'react-native';
import Wizard from './Wizard';

const ParentComponent = () => {
  const [activePage, setActivePage] = useState(1);

  const handleStepPress = (pageNumber) => {
    setActivePage(pageNumber);
  };

  // 处理硬件返回键逻辑
  const handleHardwareBack = () => {
    if (activePage > 1) {
      setActivePage(prev => prev - 1);
      return true; // 告知系统已处理返回事件，不执行默认行为
    }
    return false; // 未处理，执行系统默认返回操作
  };

  useEffect(() => {
    const backListener = BackHandler.addEventListener(
      'hardwareBackPress',
      handleHardwareBack
    );

    // 组件卸载时移除监听
    return () => backListener.remove();
  }, [activePage]); // 依赖activePage，确保状态更新后监听逻辑正确响应

  return (
    <Wizard
      activePage={activePage}
      steps={[
        { number: 1, title: 'Resume Header' },
        { number: 2, title: 'Experience' },
        { number: 3, title: 'Education' },
        { number: 4, title: 'Skills and Details' },
      ]}
      onStepPress={handleStepPress}
    />
  );
};

export default ParentComponent;

方案优势 #

• 职责单一：Wizard组件仅负责步骤渲染和点击切换，不涉及返回键逻辑，通用性更强，可直接复用在其他无需返回键处理的场景。
• 逻辑集中：返回键逻辑完全由父组件掌控，符合React状态管理原则，父组件作为容器组件负责业务逻辑，子组件专注UI展示。
• 无额外耦合：不需要给Wizard添加额外props或监听代码，避免了不必要的组件依赖。

关键说明 #

• handleHardwareBack函数中，当activePage > 1时更新状态返回上一步，并返回true告知系统已处理事件；否则返回false，让系统执行默认返回行为（如退出当前页面）。
• useEffect的依赖数组包含activePage，确保每次页面切换后，监听逻辑能正确响应最新状态。

内容的提问来源于stack exchange，提问作者Aasu Parekh