react-native TouchableNativeFeedback onPress 不起作用

Question

我創建了一個組合組件來將 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 平台上對此進行測試。

Answer 1

使用<View></View>來包裝你WrappedComponent為TouchableNativeFeedback 。

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

Answer 2

有兩個不同的TouchableNativeFeedback類。 確保您導入正確的：

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

我遇到了類似的問題，最終從“react-native”庫中使用了它。 從“react-native-gesture-handler”導入它對我不起作用。

Answer 3

我發現向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>
      );
    }
  };
}

Answer 4

您可以調用方法如下：

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

Answer 5

嘗試從 React Native 手勢處理程序庫導入 Touchable 本機反饋

Answer 6

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

補充mangei的答案問題可能是如果你從錯誤的地方導入它。 如果您在手勢處理react-native-gesture-handler則必須從react-native-gesture-handler導入它（注意：默認情況下， react-navigation的TabBar本身有一個PanGestureHandler ）。 什么react-native-gesture-handler所做的就是包裝類似的組件ScrollView或TouchableNativeFeedback有自己的實施能夠處理內部手勢GestureHandler以及那些“並不意味着”為GestureHandler而是為ScrollView或TouchableNativeFeedback 。 如果你的手勢處理機內，你必須從它導入react-native-gesture-handler否則從react-native 。

Answer 7

嘗試：useForeground={true}

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