React Native中useEffect触发TouchableOpacity.focus仅web生效Android失效

这个问题是Android端React Native原生组件的特性差异导致的：

• TouchableOpacity在web端默认支持焦点获取，但Android端的原生触摸组件默认未开启可聚焦配置，直接调用focus()方法不会生效
• 首次渲染完成后立即调用focus()的时机过早，Android端原生视图布局挂载、焦点计算存在延迟，此时组件还未完成原生层的挂载，调用focus()无响应

按照以下两个步骤修改即可：

1. 给TouchableOpacity添加focusable={true}和accessible={true}属性，声明该组件可被焦点系统捕获
2. 调整focus调用时机，使用InteractionManager等待所有原生交互和布局渲染完成后再调用，也可添加短延迟适配老旧设备

import React, { useRef, useEffect, useState } from 'react';
import { Text, TouchableOpacity, View, InteractionManager } from 'react-native';

export default function App() {
  const [focused, setFocused] = useState(0);
  const touchableRef = useRef();

  useEffect(() => {
    // 等待原生布局渲染完成后触发聚焦
    const focusTask = InteractionManager.runAfterInteractions(() => {
      touchableRef.current?.focus();
    });
    return () => focusTask.cancel();
    
    // 若InteractionManager仍不生效，可替换为短延迟方案
    // const timer = setTimeout(() => {
    //   touchableRef.current?.focus();
    // }, 200);
    // return () => clearTimeout(timer);
  }, []);

  const setFocusedElement = () => {
    setFocused(1);
  };

  return (
    <View>
      <TouchableOpacity 
        ref={touchableRef} 
        onFocus={() => setFocusedElement()}
        // Android端必需的可聚焦配置
        focusable={true}
        accessible={true}
      >
        <Text>Hello, I should be focused. {focused}</Text>
      </TouchableOpacity>
    </View>
  );
}

• 仅Android端需要额外配置focusable和accessible属性，iOS和web端会自动兼容该配置，不会产生冲突
• 延迟时长可根据设备性能调整，大部分场景下200ms以内的延迟用户无感知

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