React native 如何防止在react native中多次单击butoon？

我正在进行一个涉及用户登录的项目，它运行良好（我使用firebase进行身份验证）。但是，要进行登录，还需要一些时间，具体取决于internet连接，因此我需要在单击按钮后禁用该按钮，然后重新启用它。这是我的密码：

class Login extends Component {

    handlelogin = () => {
    this.setState.errorMessage = '';
    const {email, password} = this.state;
    auth
      .signInWithEmailAndPassword(email, password)
      .then(() => this.props.navigation.navigate('Home'))
      .catch((error) => this.setState({errorMessage: error.message}));
  };

render() {
return (

     // Some code to handle input

      <TouchableOpacity
      style={
        !this.state.email || !this.state.password
          ? styles.disabled
          : styles.button
      }
      disabled={!this.state.password || !this.state.email}
      onPress={this.handlelogin}>
      <Text style={{color: '#fff', fontWeight: '500'}}>Sign in</Text>
    </TouchableOpacity>
)}

类登录扩展组件{
handlelogin=（）=>{
this.setState.errorMessage=''；
const{email，password}=this.state；
认证
.使用电子邮件和密码登录（电子邮件、密码）
.然后（（）=>this.props.navigation.navigate（'Home'））
.catch（（error）=>this.setState（{errorMessage:error.message}））；
};
render（）{
返回(
//一些处理输入的代码
登录
)}

我已经尝试过让我的代码像这样运行，但这似乎不起作用：

class Login extends Component {

    loginProcess = false;

    handlelogin = () => {
    this.setState.errorMessage = '';
    const {email, password} = this.state;
    auth
      .signInWithEmailAndPassword(email, password)
      .then(() => this.props.navigation.navigate('Home'))
      .catch((error) => {
        this.setState({errorMessage: error.message})
        this.loginProcess = false;
   });

  };

render() {
return (

     // Some code to handle input

      <TouchableOpacity
      style={
        !this.state.email || !this.state.password
          ? styles.disabled
          : styles.button
      }
      disabled={!this.state.password || !this.state.email}
      onPress={()=> {
          if (!loginProcess) {
              this.handleLogin;
              this.loginProcess = true;
          }
      }>
      <Text style={{color: '#fff', fontWeight: '500'}}>Sign in</Text>
    </TouchableOpacity>
)}

类登录扩展组件{
loginProcess=false；
handlelogin=（）=>{
this.setState.errorMessage=''；
const{email，password}=this.state；
认证
.使用电子邮件和密码登录（电子邮件、密码）
.然后（（）=>this.props.navigation.navigate（'Home'））
.catch（（错误）=>{
this.setState（{errorMessage:error.message}）
this.loginProcess=false；
});
};
render（）{
返回(
//一些处理输入的代码
{
如果（！loginProcess）{
这是handleLogin；
this.loginProcess=true；
}
}>
登录
)}

---

这是我关于stackoverflow的第一个问题，如果有任何关于编写更好问题的提示，我们将不胜感激。

您可以实现一个微调器，在第一次单击时显示而不是按钮，并在呼叫结束后显示按钮

不久前我也遇到了同样的问题——这里有一个小例子：

const MyComponent = ({makePutCall}) => {
   const [showSpinner,setShowSpinner] = useState(false);

   const handlePress = async () => {
      setShowSpinner(true);
      await makePutCall();
      setShowSpinner(false);
   }

   return showSpinner ? <Spinner/> : <Button onPress={handlePress}/>
}

constmycomponent=（{makePutCall}）=>{
常量[showSpinner，setShowSpinner]=useState（false）；
const handlePress=async（）=>{
设置ShowSpinner（真）；
等待makePutCall（）；
设置旋转器（假）；
}
返回showSpinner？：
}

---

作为一个“微调器”，只需使用react native的ActivityIndicator即可。

谢谢，伙计，这很有效。不幸的是，我没有足够的重复次数来支持你的答案。无论如何，谢谢