9

在这种情况下，我们在应用程序中同时使用了react-native-gesture-handler Touchables 和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而不是 a ）。rngh touchable

可能

一个解决方案可能是用 替换rn Touchable我们应用程序中的每一个rn-gesture-handler Touchable，但这非常困难，因为我们的许多依赖项也在使用rn Touchables，所以很难替换所有这些 - 而且它会更难，因为rn-gesture-handler Touchables没有替换rn Touchables，我们rn-gesture-handler Touchables确实遇到了样式问题。

怎么办？

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

4

1 回答 1

0

我就是这样做的，首先创建一个TouchablePlatform.ts文件，然后在您的组件中使用它。当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>
  );
};
于 2021-03-13T14:31:38.640 回答