react-native TouchableNativeFeedback onPress 不起作用答案

【问题标题】：react-native TouchableNativeFeedback onPress not workingreact-native TouchableNativeFeedback onPress 不起作用
【发布时间】：2018-11-06 03:12:32
【问题描述】：

我已经创建了一个组合组件来组合 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 平台上对此进行测试。

【问题讨论】：

标签： react-native react-native-android react-navigation touchableopacity touchablewithoutfeedback

【解决方案1】：

你可以调用如下方法：

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>
            );
        }
    };
}

【讨论】：

【解决方案2】：

使用<View></View> 将WrappedComponent 包装成TouchableNativeFeedback。

<TouchableNativeFeedback
  onPress={() => this.props.onContainerViewPress()}>
    <View>
      <WrappedComponent {...this.props} />
    </View>
</TouchableNativeFeedback>

【讨论】：

我遇到了类似的问题。我按照您的建议做了，并将我的组件包装在一个视图中，该视图由 TouchableNativeFeedback 包装。我没有得到连锁反应，但 onPress 被解雇了。你能告诉我为什么会这样吗？

【解决方案3】：

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

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

即

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>
      );
    }
  };
}

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

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 而言“不意味着”但对于@ 987654332@ 或TouchableNativeFeedback。如果您在手势处理程序中，则必须从 react-native-gesture-handler 导入它，否则从 react-native 导入。

【讨论】：

【解决方案7】：

试试：useForeground={true}

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

【讨论】：