如何将TouchableHighlight的ref传入requireExternalGestureToFail？

你的问题核心在于：原生TouchableHighlight的ref并不是Gesture Handler组件的ref，无法被新API的requireExternalGestureToFail识别，导致手势优先级控制失效。下面两种方案可以解决这个问题：

方案一：使用react-native-gesture-handler提供的TouchableHighlight #

react-native-gesture-handler库本身实现了兼容旧API的TouchableHighlight，它的内部基于新的Gesture Handler系统构建，ref可以直接被新API使用：

1. 替换导入来源：

// 替换原生导入
// import { TouchableHighlight } from 'react-native';
import { TouchableHighlight } from 'react-native-gesture-handler';

2. 保持原有代码结构即可：

const touchableRef = useRef(null);

const gestureConfig = Gesture.Tap()
  .requireExternalGestureToFail([touchableRef])
  .onStart(onTap);

return (
  <GestureDetector gesture={gestureConfig}>
    <View>
      <TouchableHighlight
        ref={touchableRef}
        onPress={onPress}
      >
        {children}
      </TouchableHighlight>
      {/* 其他内容 */}
    </View>
  </GestureDetector>
);

这种方案完全保留TouchableHighlight的原有功能，同时让它和新Gesture API的手势优先级控制正常工作。

方案二：用NativeViewGestureHandler包裹原生TouchableHighlight #

如果必须使用react-native原生的TouchableHighlight，可以用NativeViewGestureHandler包裹它，将原生组件的触摸事件接入Gesture Handler系统：

import { TouchableHighlight } from 'react-native';
import { NativeViewGestureHandler, GestureDetector, Gesture } from 'react-native-gesture-handler';

const nativeGestureRef = useRef(null);

const gestureConfig = Gesture.Tap()
  .requireExternalGestureToFail([nativeGestureRef])
  .onStart(onTap);

return (
  <GestureDetector gesture={gestureConfig}>
    <View>
      <NativeViewGestureHandler ref={nativeGestureRef}>
        <TouchableHighlight onPress={onPress}>
          {children}
        </TouchableHighlight>
      </NativeViewGestureHandler>
      {/* 其他内容 */}
    </View>
  </GestureDetector>
);

NativeViewGestureHandler会接管原生TouchableHighlight的触摸事件流，它的ref可以被新API的手势识别器识别，从而实现你需要的优先级控制逻辑。

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