React Native Alert删除确认弹窗卡顿无响应问题求助

我帮你梳理下问题所在，然后一步步修复这个弹窗卡顿和点击无反应的情况：

核心问题拆解 #

1. Delete按钮点击无响应：你写的onPress: () => this.handlePress.bind(this)只是返回了一个绑定了this的函数，但根本没有执行它，所以点击Delete后完全不会触发任何操作。
2. 弹窗后卡顿：每次触发Alert时都调用bind(this)，会频繁创建新的函数实例，这会带来不必要的性能开销，进而引发设备卡顿。

修复方案 #

步骤1：修正函数绑定方式（解决核心问题） #

在类组件中，推荐提前绑定handlePress的上下文，避免每次调用都重复绑定：

方案A：构造函数中提前绑定（传统写法）

import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
import CircleButton from '../elements/CircleButton';

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // 提前绑定this，避免重复创建函数实例
    this.handlePress = this.handlePress.bind(this);
  }

  handlePress() {
    const { currentUser } = firebase.auth();
    const db = firebase.firestore();
    db.collection(`users/${currentUser.uid}/friends`).doc(this.state.key).delete()
      .then(() => {
        console.log('Deleted');
        this.props.navigation.goBack();
      })
      .catch((error) => {
        console.log(error);
      });
  }

  render() {
    return (
      // ...你的其他组件代码
      <CircleButton style={styles.funcButton} onPress={()=>{
        Alert.alert(
          'Are you sure to delete?',
          'never recover',
          [
            {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
            // 直接使用提前绑定好的handlePress
            {text: 'Delete', onPress: this.handlePress, style: 'destructive'},
          ],
          { cancelable: false }
        )
      }}>
        {''}
      </CircleButton>
    );
  }
}

方案B：用箭头函数定义handlePress（更简洁）

箭头函数会自动继承当前上下文的this，不需要手动绑定：

import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
import CircleButton from '../elements/CircleButton';

class YourComponent extends React.Component {
  // 箭头函数自动绑定this，无需额外操作
  handlePress = () => {
    const { currentUser } = firebase.auth();
    const db = firebase.firestore();
    db.collection(`users/${currentUser.uid}/friends`).doc(this.state.key).delete()
      .then(() => {
        console.log('Deleted');
        this.props.navigation.goBack();
      })
      .catch((error) => {
        console.log(error);
      });
  }

  render() {
    return (
      // ...你的其他组件代码
      <CircleButton style={styles.funcButton} onPress={()=>{
        Alert.alert(
          'Are you sure to delete?',
          'never recover',
          [
            {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
            // 直接引用箭头函数即可
            {text: 'Delete', onPress: this.handlePress, style: 'destructive'},
          ],
          { cancelable: false }
        )
      }}>
        {''}
      </CircleButton>
    );
  }
}

步骤2：额外性能优化（可选） #

如果你的CircleButton是自定义组件，建议把Alert的弹窗逻辑也提前定义成类方法，避免在onPress中创建匿名函数，进一步减少性能开销：

// 新增类方法封装弹窗逻辑
showDeleteConfirm = () => {
  Alert.alert(
    'Are you sure to delete?',
    'never recover',
    [
      {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
      {text: 'Delete', onPress: this.handlePress, style: 'destructive'},
    ],
    { cancelable: false }
  )
}

// 然后CircleButton的onPress改成直接引用方法
<CircleButton style={styles.funcButton} onPress={this.showDeleteConfirm}>
  {''}
</CircleButton>

验证修复效果 #

完成以上修改后，弹窗应该不会再卡顿，点击Delete按钮会正常触发删除操作，控制台会输出Deleted并自动返回上一页；点击Cancel也会正常输出日志。

内容的提问来源于stack exchange，提问作者Shun Ishikawa