1

我创建了一个组合组件来将 TouchableNativeFeedback 组合到 wrapperComponent。

export default function withFeedback2(
    WrappedComponent
) {
    return class extends BaseComponent {
        constructor(props) {
            super(props);
        }

        render() {
            return (
                <View>
                    <TouchableNativeFeedback
                        onPress={() => this.props.onContainerViewPress()}

                    >
                        <WrappedComponent {...this.props} />
                    </TouchableNativeFeedback>
                    {/* <TouchableOpacity
                        onPress={this.props.onContainerViewPress ? () => this.props.onContainerViewPress() : null}

 >
                        <WrappedComponent {...this.props} />
                    </TouchableOpacity> */}
                </View>
            );
        }
    };
}

但是TochableNativeFeedback的 OnPress 事件没有触发。而 OnPress 事件被正确触发，并且如果wrappercomponent包裹在 TouchableOpacity 下，则调用 wrappercomponent 的 onContainerViewPress 属性。

我正在 Android 平台上对此进行测试。

4

7 回答 7

11

使用 a<View></View>来包装你的WrappedComponentfor TouchableNativeFeedback。

<TouchableNativeFeedback
  onPress={() => this.props.onContainerViewPress()}>
    <View>
      <WrappedComponent {...this.props} />
    </View>
</TouchableNativeFeedback>
于 2018-05-27T18:05:44.560 回答
5

有两个不同的TouchableNativeFeedback班级。确保导入正确的：

import { TouchableNativeFeedback } from "react-native"
import { TouchableNativeFeedback } from "react-native-gesture-handler"

我有一个类似的问题，最后从“react-native”库中使用它。从“react-native-gesture-handler”导入它对我不起作用。

于 2020-01-18T15:17:10.550 回答
4

我发现添加波纹效果可以TouchableNativeFeedback解决我的问题：

background={TouchableNativeFeedback.Ripple("#FFFFFF",true)}

IE

export default function withFeedback2(
  WrappedComponent
) {
  return class extends BaseComponent {
    constructor(props) {
      super(props);
    }

    render() {
      return (
        <View>
          <TouchableNativeFeedback
            onPress={() => this.props.onContainerViewPress()}
            background={TouchableNativeFeedback.Ripple("#FFFFFF",true)}
          >
            <WrappedComponent {...this.props} />
          </TouchableNativeFeedback>
        </View>
      );
    }
  };
}
于 2018-12-12T03:16:29.817 回答
0 
import { TouchableNativeFeedback } from "react-native"
import { TouchableNativeFeedback } from "react-native-gesture-handler"

补充mangei的答案，如果你从错误的地方导入它，问题可能是。react-native-gesture-handler如果您在手势处理程序中，则必须从中导入它（注意：默认情况下react-navigation，它TabBar本身有一个PanGestureHandler）。它的作用是用它自己的实现来react-native-gesture-handler包装组件，例如ScrollView或者TouchableNativeFeedback用它自己的实现来处理内部的手势，这些手势GestureHandler“不是”用于“”，GestureHandler而是“用于”ScrollView或“ .” TouchableNativeFeedback。如果您在手势处理程序中，则必须从react-native-gesture-handlerelse from导入它react-native。

于 2020-11-10T15:14:50.253 回答
0

尝试：useForeground={true}

<TouchableNativeFeedback onPress={() => {}} useForeground={true}>

于 2021-04-04T09:57:22.130 回答
0

您可以调用方法如下：

export default function withFeedback2(
    WrappedComponent
) {
    return class extends BaseComponent {
        constructor(props) {
            super(props);
            this.onContainerViewPress = this.onContainerViewPress.bind(this);

        }
          onContainerViewPress() {
        const { onContainerViewPress } = this.props;
        onContainerViewPress();
    }

        render() {
            return (
                <View>
                    <TouchableNativeFeedback
                                    onPress={() => { this.onContainerViewPress(); }}
                    >
                        <WrappedComponent {...this.props} />
                    </TouchableNativeFeedback>
                    {/* <TouchableOpacity
                        onPress={this.props.onContainerViewPress ? () => this.props.onContainerViewPress() : null}

 >
                        <WrappedComponent {...this.props} />
                    </TouchableOpacity> */}
                </View>
            );
        }
    };
}
于 2018-05-27T10:25:25.180 回答
0

尝试从反应原生手势处理程序库中导入 Touchable 原生反馈

于 2019-09-30T12:23:17.083 回答