(TypeScript, react native) setTimeout 结合 onPressIn 和 onPressOut

Question

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

"Please attach a method to this component"

当我松开按钮时会显示该消息，所以我认为问题出在 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"} />

这会产生错误消息 Please attach a method to this component。

您可以按如下方式解决此问题。

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

我们只提供函数() => {}，什么都不做。该消息不再出现。

(TypeScript, react native) setTimeout 结合 onPressIn 和 onPressOut

(TypeScript, react native) setTimeout in combination with onPressIn and onPressOut

settimeout

typescript

react-native