React native 对本机加压素和加压素进行反应

我试图创建一个长按按钮以保持计数，但是当我释放onPressOut时，间隔不会停止

const App = () => {
      const [count, setCount] = useState(0);
      let timer;
      const onButtonPressIn = () => {
        timer = setInterval(() => {
          console.log("in");
          setCount(count => count + 1);
        }, 1000);
      } 

      const onButtonPressOut = () =>{
        console.log("out");
        clearInterval(timer);
      }
      return(
          <View>
              <TouchableOpacity style={styles.longbtn}
              activeOpacity={0.9}
              onPressIn={()=> onButtonPressIn()}
              onPressOut={()=> onButtonPressOut()}
              >
                <Text style={styles.longbtntt}>LONG PRESS TO START - {count}</Text>
              </TouchableOpacity>
          </View>
      )
}

const-App=（）=>{
const[count，setCount]=useState（0）；
让定时器；
const onButtonPressIn=（）=>{
计时器=设置间隔（（）=>{
控制台。登录（“登录”）；
setCount（count=>count+1）；
}, 1000);
} 
const onButtonPressOut=（）=>{
控制台。登录（“退出”）；
清除间隔（计时器）；
}
返回(
onButtonPressIn（）}
onPressOut={（）=>onButtonPressOut（）}
>
长按启动-{count}
)
}

当您为计时器指定新的间隔时，计时器会更改值，但函数

on按钮pressout

会记住创建函数时计时器的值。您可以在此处使用

useCallback

，如下所示：

const onButtonPressOut = useCallback(() => { //same thing }, [timer]);

---

这将在

计时器更改时更新函数，并清除适当的间隔。
用于处理计时器的方法与您尝试为其实现的用例类型不完全相同。在解除
计时器时，必须使用
clearTimeout
而不是
clearTimeout
。解决方案如下，只需将其修改为使用挂钩

 import React from 'react';
 import {
   SafeAreaView,
   View,
   Dimensions,
   TouchableOpacity,
   Text
 } from 'react-native';

export default class App extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     counter: 0
   };
   this.timer = null;
 }

 addOne = () => {
   this.setState({counter: this.state.counter+1});
   this.timer = setTimeout(this.addOne, 200);
 }

 stopTimer = () => {
  clearTimeout(this.timer);
 }

render() {
  const screenHeight = Math.round(Dimensions.get('window').height);
  return (
  <SafeAreaView>
  <View style={{height: screenHeight}}>
     <TouchableOpacity 
       style={{backgroundColor: "#FFC0CB"}}
       onPressIn={this.addOne} 
       onPressOut={this.stopTimer}
     >
      <Text>Press to start</Text>
     </TouchableOpacity>
     <Text>{this.state.counter}</Text>
     </View>
    </SafeAreaView>
   );
 }
}

从“React”导入React；
进口{
安全区域视图，
看法
尺寸，
可触摸不透明度，
正文
}从“反应本机”；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
柜台:0
};
this.timer=null；
}
addOne=（）=>{
this.setState（{counter:this.state.counter+1}）；
this.timer=setTimeout（this.addOne，200）；
}
停止计时器=（）=>{
clearTimeout（this.timer）；
}
render（）{
const screenHeight=Math.round（Dimensions.get（'window'）.height）；
返回(
按开始
{this.state.counter}
);
}
}
您能以反应功能组件的方式进行操作吗？