react-native - 如何正确地将 native 手势处理程序可触摸内容与 native 可触摸内容混合使用？

Question

在这种情况下，我们在应用程序中同时使用react-native-gesture-handler Touchable和react-native Touchable。 (通过Touchables，我的意思是TouchableOpacity，TouchableHighlight等)。如您所知，react-native-gesture-handler也提供了这些组件，以便它们在用作react-native-gesture-handler手势识别组件的子代时可以工作。
原来
我们以为只在绝对需要rn-gesture-handler Touchables才能正常工作的组件中使用rn-gesture-handler Touchables(即用gestureHandlerRootHOC包裹的根 View )，而在其他任何地方都使用rn Touchables。
很遗憾
我们碰到了其中两个组件相互干扰的情况，我们遇到了奇怪的问题(例如触摸组件时就好像它具有pointerEvents="none"一样，只是因为它在Android中使用了rn touchable而不是rngh touchable)。
可能吧
一个解决方案可能是用rn Touchable替换我们应用程序中的每个单个rn-gesture-handler Touchable，但这非常困难，因为我们的许多依赖项也都使用rn Touchables，因此将很难替换所有内容-但由于rn-gesture-handler Touchables是NOT drop in replacements of rn Touchables，我们确实在样式rn-gesture-handler Touchables方面遇到了问题。
怎么办？
我需要一些帮助来妥善解决该问题-我认为，即使是一些像是通过 react native 的可触摸对象来阻止触摸的方法，也可以做到。

Answer 1

这就是我的方法，首先创建一个TouchablePlatform.ts文件，然后在您的组件中使用它。当将withNativeResponder作为prop传递给组件时，它将使用react-native-gesture-handler中的那些。

// src/commons/components/TouchablePlatform.ts

import React, {FC} from 'react';
import {
  Platform,
  TouchableNativeFeedback,
  TouchableNativeFeedbackProps,
  TouchableHighlight,
  TouchableHighlightProps,
} from 'react-native';

import {
  TouchableNativeFeedback as TouchableNativeFeedbackGestureHandler,
  TouchableHighlight as TouchableHighlightGestureHandler,
} from 'react-native-gesture-handler';

export type TouchablePlatformProps = {withNativeResponder?: boolean} & (
  | TouchableHighlightProps
  | TouchableNativeFeedbackProps
);

export const TouchablePlatform: FC<TouchablePlatformProps> = ({
  children,
  withNativeResponder = false,
  style = {},
  ...props
}) => {
  if (withNativeResponder) {
    if (Platform.OS === 'ios') {
      return (
        <TouchableHighlightGestureHandler {...props} style={[{flex: 1}, style]}>
          {children}
        </TouchableHighlightGestureHandler>
      );
    }

    return (
      <TouchableNativeFeedbackGestureHandler
        {...props}
        style={[
          {
            flex: 1,
            maxWidth: '100%',
            width: '100%',
          },
          style,
        ]}>
        {children}
      </TouchableNativeFeedbackGestureHandler>
    );
  }

  if (Platform.OS === 'ios') {
    return (
      <TouchableHighlight {...props} style={[{flex: 1}, style]}>
        {children}
      </TouchableHighlight>
    );
  }

  return (
    <TouchableNativeFeedback {...props} style={style}>
      {children}
    </TouchableNativeFeedback>
  );
};