React Native中TouchableWithoutFeedback的onFocus与onBlur未触发问题

TouchableWithoutFeedback的onFocus和onBlur回调并非用于处理用户点击的交互焦点，它们是针对**可访问性操作（如屏幕阅读器）**的焦点回调，所以直接用这两个方法没法实现类似TextInput的点击聚焦、点击别处失焦效果。

下面是两种可行的实现方案：

方案一：全局触摸事件监听判断点击区域 #

通过监听全局触摸事件，结合组件位置判断点击是否在目标组件内，从而控制聚焦状态：

import { useRef, useEffect, useState } from 'react';
import { TouchableWithoutFeedback, View, Text, StyleSheet, TouchableWithoutFeedback } from 'react-native';

const FocusableCard = ({ header, description, footer }) => {
  const [isFocused, setIsFocused] = useState(false);
  const cardRef = useRef(null);

  // 点击卡片时触发聚焦
  const handleCardPress = () => {
    setIsFocused(true);
  };

  // 监听全局触摸事件，判断是否点击到卡片外部
  useEffect(() => {
    const handleGlobalTap = ({ nativeEvent }) => {
      if (!isFocused) return;

      const { pageX, pageY } = nativeEvent;
      cardRef.current.measure((_, __, width, height, pageXOffset, pageYOffset) => {
        const isInsideCard = pageX >= pageXOffset && pageX <= pageXOffset + width &&
                             pageY >= pageYOffset && pageY <= pageYOffset + height;
        if (!isInsideCard) {
          setIsFocused(false);
        }
      });
    };

    const eventSubscription = TouchableWithoutFeedback.addEventListener('press', handleGlobalTap);
    return () => eventSubscription.remove();
  }, [isFocused]);

  return (
    <TouchableWithoutFeedback onPress={handleCardPress} ref={cardRef}>
      <View style={[styles.cardContainer, isFocused && styles.focused]}>
        <Text style={styles.header}>{header}</Text>
        <Text style={styles.description}>{description}</Text>
        <Text style={styles.footer}>{footer}</Text>
      </View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  cardContainer: {
    padding: 16,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 8,
    marginVertical: 8,
  },
  focused: {
    borderColor: '#2196F3',
    backgroundColor: '#f5f9ff',
  },
  header: {
    fontSize: 18,
    fontWeight: '600',
  },
  description: {
    fontSize: 14,
    color: '#666',
    marginVertical: 8,
  },
  footer: {
    fontSize: 12,
    color: '#999',
    textAlign: 'right',
  },
});

export default FocusableCard;

方案二：父容器点击事件处理（更简洁） #

给页面最外层添加一个可点击容器，点击时如果卡片处于聚焦状态则触发失焦，同时卡片自身点击触发聚焦：

import { useState, useRef } from 'react';
import { TouchableWithoutFeedback, View, Text, StyleSheet } from 'react-native';

const App = () => {
  const [isCardFocused, setIsCardFocused] = useState(false);
  const cardRef = useRef(null);

  return (
    {/* 外层全屏可点击容器，点击非卡片区域时失焦 */}
    <TouchableWithoutFeedback 
      onPress={() => isCardFocused && setIsCardFocused(false)}
      style={{ flex: 1 }}
    >
      <View style={{ flex: 1, padding: 20 }}>
        <TouchableWithoutFeedback 
          onPress={() => setIsCardFocused(true)}
          ref={cardRef}
        >
          <View style={[styles.card, isCardFocused && styles.focused]}>
            <Text>标题</Text>
            <Text>这里是描述内容</Text>
            <Text>底部文字</Text>
          </View>
        </TouchableWithoutFeedback>

        {/* 页面其他组件 */}
        <View style={{ height: 200, backgroundColor: '#f0f0f0', marginTop: 20 }} />
      </View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  card: {
    padding: 16,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
  },
  focused: {
    borderColor: '#007AFF',
    backgroundColor: '#f0f8ff',
  },
});

export default App;

注意事项 #

• 方案二中，若页面存在其他可点击组件（如按钮、其他Touchable），这些组件的点击事件会优先触发，不会触发外层容器的失焦逻辑，这符合交互预期。
• 若使用方案一，注意在组件卸载时移除事件监听，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Kavin Raju S