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下，则调用 onContainerViewPress proppercomponent的prop。

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

Answer 1

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

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

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

Answer 2

使用DictReader将def closest_score(val, gender = 'check_all'): data = csv.DictReader(open('filename.csv'), delimiter=',') if gender == 'check_all': return min(data, key=lambda x:abs(val-int(x['Score']))) return min((i for i in data if i['Gender'].lower() == gender.lower()), key=lambda x:abs(val-int(x['Score'])))包裹在<View></View>。

WrappedComponent

Answer 3

您可以按以下方式调用方法：

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 4

我发现向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>
      );
    }
  };
}

Answer 5

尝试从react本机手势处理程序库中导入Touchable本机反馈

Answer 6

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

补充mangei的答案可能是如果您从错误的位置导入它的问题。如果您在手势处理程序内部，则必须从react-native-gesture-handler导入它（注意：react-navigation的{{1}}本身默认带有TabBar）。 PanGestureHandler所做的工作是将react-native-gesture-handler或ScrollView之类的组件包装起来，并带有自己的实现，以便能够处理TouchableNativeFeedback内部的手势，这些手势对于用户来说“并不意味着” GestureHandler，而不是GestureHandler或ScrollView。如果您在手势处理程序内部，则必须从TouchableNativeFeedback导入，否则从react-native-gesture-handler导入。

Answer 7

试试：useForeground={true}

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

react-native TouchableNativeFeedback onPress无效

7 个答案: