从 React Native 中禁用的 TouchableOpacity 获取事件

Question

I want to collect some data about how many users are pressing a disabled button (implemented using TouchableOpacity ) in my React-Native app? Since I am passing disabled=true to the element, the onPress event handler is not getting executed?

Is there any way to listen to events from a disabled TouchableOpacity .

My last resort is to simply make the button look disabled, and capture the onPress event, but I am looking for some tricks to capture event from the disabled element directly.

Answer 1

According to the docs, TouchableOpacity inherits all the props from TouchableWithoutFeedback , and the disabled prop there disables all interactions, so the onPress event is never fired. As you guessed, the best course of action is to make the button appear disable:

import React, { useState } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import LabeledSwitch from './components/LabeledSwitch';
export default function App() {
  const [buttonIsActive, setButtonIsActive] = useState(false);
  
  const onButtonPressed = ({ nativeEvent }) => {
    if (!buttonIsActive) {
      // do your data gathering
      console.log(nativeEvent);
      return;
    }
    // do default button stuff
  };
  return (
    <View style={styles.container}>
      <LabeledSwitch
        label="Set button active"
        currentValueMessage={
          'Button is ' + (buttonIsActive ? 'active' : 'inactive')
        }
        value={buttonIsActive}
        onValueChange={setButtonIsActive}
      />
      <TouchableOpacity
        style={[styles.touchable, !buttonIsActive && styles.disabledButton]}
        onPress={onButtonPressed}
        // since we are faking disabling the button we will need to
        // hide touch animations when the button is disabled
        activeOpacity={buttonIsActive ? 0.2 :styles.disabledButton.opacity}
        >
        <Text style={[styles.text,!buttonIsActive && styles.disabledButton]}>Press me</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  touchable: {
    borderRadius: 10,
    backgroundColor: 'lightgreen',
    borderColor: 'green',
    borderWidth: 1,
    alignItems: 'center',
    padding: 5,
    margin: 2,
    width: '50%',
    alignSelf: 'center',
  },
  disabledButton: {
    opacity: 0.8,
  },
  text:{
    color:'darkgreen',
    fontSize:18
  }
});

Here's the snack