如何正确混合 react-native-gesture-handler touchables 与 react-native touchables？

Question

我们在这种情况下，我们在我们的应用程序中同时使用react-native-gesture-handler Touchables AND react-native Touchables。（我所说的 Touchables 是指 TouchableOpacity、TouchableHighlight 等）。如您所知， react-native-gesture-handler 也提供了这些组件，以便它们在用作react-native-gesture-handler手势识别组件。

最初

我们认为我们只会rn-gesture-handler Touchables在绝对需要rn-gesture-handler Touchables才能工作的组件中使用（即用gestureHandlerRootHOC包裹的根视图）并rn Touchables在其他任何地方使用。

很遗憾

我们遇到了其中两个组件干扰的情况，我们遇到了奇怪的问题（例如触摸通过一个组件，好像它pointerEvents="none"只是因为它在 Android 中使用了 arn touchable而不是 an rngh touchable）。

可能

一个解决方案可能是更换每一个rn Touchable在我们与一个应用程序rn-gesture-handler Touchable，但是这是超级困难的，因为我们的很多依赖也在使用的rn Touchables所以这将是难以替代的一切-而且这将是更难，因为rn-gesture-handler Touchables是在更换不降rn Touchables并且我们rn-gesture-handler Touchables确实遇到了样式问题。

怎么办？

我需要一些帮助来正确解决这个问题 - 我认为即使是像阻止通过 react-native touchables 进行触摸的方法这样的hacky 也可以。

Answer 1

我就是这样做的，首先创建一个TouchablePlatform.ts文件，然后在您的组件中使用它。当作为 prop 传递withNativeResponder给组件时，它将使用来自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>
  );
};