（TypeScript，原生反应）setTimeout 与 onPressIn 和 onPressOut 组合

Question

我是 React Native 的新手，正在构建我的第一个应用程序。 我有一个按钮组件，按下时会执行某些操作，按住时会执行相同但重复的操作。为了实现这一目标，我构建了一个简单的逻辑，但我无法让它正常工作，因为当我按住按钮时，它会执行它应该执行的操作，但控制台显示：

“请为该组件附加一个方法”

当我松开按钮时会显示该消息，因此我认为问题出在 onPressOut 中。

这是代码，对于代码中的西班牙语感到抱歉：c

import { View, Text, StyleSheet } from "react-native";
import { Button } from "react-native-elements";

interface INTERFACE {
  accionMenos: () => void;
  accionMas: () => void;
  texto: string;
  titleBotonMenos: string;
  titleBotonMas: string;
}

const BotonTextoBoton = ({
  accionMenos,
  accionMas,
  texto,
  titleBotonMenos,
  titleBotonMas,
}: INTERFACE) => {
   let timer: NodeJS.Timeout;

  function addTimer(action: () => void) {
    action();

    timer = setTimeout(() => {
      addTimer(action);
    }, 100);
  }

  function eraseTimer() {
    clearTimeout(timer);
  }

  return (
    <View style={styles.viewContainer}>
      <View style={{ width: "15%", backgroundColor: "red" }}>
        <Button
          onPressIn={() => addTimer(accionMenos)}
          onPressOut={eraseTimer}
          title={titleBotonMenos}
        />
      </View>
      <Text style={{ margin: 3, fontSize: 20 }}>{texto}</Text>
      <View style={{ width: "15%" }}>
        <Button
          onPressIn={() => addTimer(accionMas)}
          onPressOut={eraseTimer}
          title={titleBotonMas}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  viewContainer: {
    flexDirection: "row",
    justifyContent: "center",
    paddingTop: 30,
    alignItems: "center",
  },
});

export default BotonTextoBoton;

Answer 1

Button 组件需要一个 onPress 方法。这可能什么也不做。比较以下代码片段以使其更加明确。不提供 onPress 相当于传递 undefined。

<Button onPress={undefined} onPressIn={() => addTimer(accionMas)} onPressOut={eraseTimer} title={"Titlte"} />

这会产生错误消息请向此组件附加一个方法。

您可以按如下方式修复此问题。

<Button onPress={() => {}} onPressIn={() => addTimer(accionMas)} onPressOut={eraseTimer} title={"Titlte"} />

我们只提供函数 () =>; {} 不执行任何操作。该消息不再出现。