react native prevent button click twice

React Native中防止按钮被连续点击的方法有很多，以下是其中的几种：

在React Native中，可以使用state变量来控制组件的状态，可以通过控制state变量来禁用或启用按钮。例如，在点击按钮时可以将按钮状态设置为不可用，等异步任务完成后再将其设置为可用。

示例代码如下：

import React, { useState } from 'react';
import { TouchableOpacity, Text } from 'react-native';
const MyButton = () => {
  const [isDisabled, setIsDisabled] = useState(false);
  const handleClick = async () => {
    if (isDisabled) return;
    setIsDisabled(true);
    // 执行异步任务
    await someAsyncTask();
    setIsDisabled(false);
  return (
    <TouchableOpacity disabled={isDisabled} onPress={handleClick}>
      <Text>点击我</Text>
    </TouchableOpacity>
在上面的代码中，使用useState来定义一个名为isDisabled的状态变量来控制按钮的可用状态，当点击按钮时，先检查按钮是否已经被禁用，如果已经禁用，则直接返回；如果按钮未被禁用，则将其禁用，并执行异步任务，待异步任务完成后再将按钮状态设置为可用。
使用lodash库的debounce函数
另一种常见的方法是使用lodash库的debounce函数，该函数可以延迟函数的执行，从而可以避免短时间内多次执行该函数。例如，在点击按钮时可以使用debounce函数来延迟函数的执行：
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import _ from 'lodash';
const MyButton = () => {
  const handleClick = _.debounce(() => {
    // 执行异步任务
    someAsyncTask();
  }, 1000, { leading: true, trailing: false });
  return (
    <TouchableOpacity onPress={handleClick}>
      <Text>点击我</Text>
    </TouchableOpacity>
在上面的代码中，使用lodash库的debounce函数来定义一个名为handleClick的函数，该函数会在点击按钮后延迟1秒执行，如果在1秒内再次点击按钮，则不会执行函数。
以上是React Native中防止按钮被连续点击的几种常见方法。选择哪种方法取决于你的具体需求和应用场景。