React Native中替代document.activeElement的非侵入式焦点获取方案咨询

方案1：基于Context的全局焦点管理 #

无需逐个组件绑定ref或重复处理事件，通过Context封装全局焦点状态，配合一次封装的高阶组件（HOC）自动注入监听逻辑：

1. 创建焦点管理Context：

import { createContext, useContext, useState } from 'react';

const FocusContext = createContext();

export function FocusProvider({ children }) {
  const [activeElement, setActiveElement] = useState(null);

  const handleFocus = (elementId) => setActiveElement(elementId);
  const handleBlur = () => setActiveElement(null);

  return (
    <FocusContext.Provider value={{ activeElement, handleFocus, handleBlur }}>
      {children}
    </FocusContext.Provider>
  );
}

export function useFocus() {
  return useContext(FocusContext);
}

2. 封装通用可聚焦组件（以TextInput为例）：

import { TextInput } from 'react-native';
import { useFocus } from './FocusProvider';

export const TrackedTextInput = (props) => {
  const { handleFocus, handleBlur } = useFocus();
  const { elementId, ...restProps } = props;

  return (
    <TextInput
      {...restProps}
      onFocus={() => {
        handleFocus(elementId);
        props.onFocus?.();
      }}
      onBlur={() => {
        handleBlur();
        props.onBlur?.();
      }}
    />
  );
};

3. 业务代码中直接使用：

import { TrackedTextInput, useFocus } from './path-to-files';

function LoginScreen() {
  const { activeElement } = useFocus();

  // 任意位置可直接获取当前聚焦元素ID，执行对应逻辑
  useEffect(() => {
    if (activeElement === 'username') {
      // 用户名输入框聚焦时的逻辑
    }
  }, [activeElement]);

  return (
    <>
      <TrackedTextInput elementId="username" placeholder="用户名" />
      <TrackedTextInput elementId="password" placeholder="密码" />
    </>
  );
}

该方案只需封装一次常用可聚焦组件，业务层无需额外处理焦点事件，状态存储在Context中不会随组件渲染周期失效。

方案2：利用Keyboard模块+组件ref监听 #

无需封装组件，仅给目标元素添加ref，通过键盘事件触发焦点状态检查：

import { Keyboard, TextInput, useEffect, useState, useRef } from 'react-native';

function ProfileScreen() {
  const [activeInput, setActiveInput] = useState(null);
  const nameRef = useRef(null);
  const phoneRef = useRef(null);

  useEffect(() => {
    const onKeyboardShow = () => {
      if (nameRef.current?.isFocused()) {
        setActiveInput('name');
      } else if (phoneRef.current?.isFocused()) {
        setActiveInput('phone');
      }
    };

    const onKeyboardHide = () => setActiveInput(null);

    const showSub = Keyboard.addListener('keyboardDidShow', onKeyboardShow);
    const hideSub = Keyboard.addListener('keyboardDidHide', onKeyboardHide);

    return () => {
      showSub.remove();
      hideSub.remove();
    };
  }, []);

  return (
    <>
      <TextInput ref={nameRef} placeholder="姓名" />
      <TextInput ref={phoneRef} placeholder="手机号" />
    </>
  );
}

注意：isFocused方法并非所有可聚焦组件都支持，需提前测试目标组件的兼容性。

方案3：全局事件总线（轻量化方案） #

如果不想依赖Context，可通过简易事件总线传递焦点状态：

// 全局事件工具
const focusEmitter = {
  handlers: {},
  on(event, handler) {
    this.handlers[event] = [...(this.handlers[event] || []), handler];
  },
  emit(event, data) {
    (this.handlers[event] || []).forEach(handler => handler(data));
  },
  off(event, handler) {
    this.handlers[event] = this.handlers[event]?.filter(h => h !== handler);
  }
};

// 封装可追踪组件
export const TrackedTextInput = (props) => {
  const { elementId, ...restProps } = props;
  return (
    <TextInput
      {...restProps}
      onFocus={() => {
        focusEmitter.emit('focus', elementId);
        props.onFocus?.();
      }}
      onBlur={() => {
        focusEmitter.emit('blur');
        props.onBlur?.();
      }}
    />
  );
};

// 业务组件中监听
function SettingsScreen() {
  const [activeElement, setActiveElement] = useState(null);

  useEffect(() => {
    const handleFocus = (id) => setActiveElement(id);
    const handleBlur = () => setActiveElement(null);
    
    focusEmitter.on('focus', handleFocus);
    focusEmitter.on('blur', handleBlur);
    
    return () => {
      focusEmitter.off('focus', handleFocus);
      focusEmitter.off('blur', handleBlur);
    };
  }, []);

  return <TrackedTextInput elementId="nickname" placeholder="昵称" />;
}

该方案轻量化，适合小型项目，无需复杂状态管理，灵活度较高。

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