Реагировать-родной 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>
            );
        }
    };
}

Но событие OnPress объекта TochableNativeFeedback не запускается. Принимая во внимание, что событие OnPress генерируется правильно, и onContainerViewPress prop оберточного компонента вызывается, если оберточный компонент обернут в TouchableOpacity.

Я тестирую это на платформе 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". Импорт его из "response-native-gesture-handler" у меня не сработал.

Answer 3

Я обнаружил, что добавление эффекта Ripple к 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 4

Попробуйте: useForeground = {true}

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

Answer 5

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-handler еще от react-native.

Answer 6

Попробуйте импортировать собственный отзыв Touchable из библиотеки обработчиков жестов React.

Answer 7

Вы можете вызвать метод, как показано ниже:

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