You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwipeListView左滑时无法弹出Alert问题求助

React Native SwipeListView左滑卡片无法触发Alert弹窗

我基于SwipeListView实现了文章摘要卡片列表,需求是用户左滑卡片时,弹出确认删除的提示:Are you sure that you want to Delete this article?。目前卡片可以正常左滑,但Alert始终无法显示,已经尝试过AI工具给出的方案但均无效,现寻求资深React Native开发者的帮助。

核心代码逻辑

// 关键代码片段
import { Alert, TouchableOpacity, Text, StyleSheet } from 'react-native';
import SwipeListView from 'react-native-swipe-list-view';

// 渲染列表组件
<SwipeListView
  data={articles}
  renderItem={({ item }) => <ArticleCard item={item} />}
  renderHiddenItem={renderHiddenItem}
  rightOpenValue={-75}
/>

// 左滑后显示的删除操作按钮
const renderHiddenItem = ({ item }) => (
  <TouchableOpacity 
    style={styles.deleteButton}
    onPress={() => handleDelete(item.id)}
  >
    <Text style={styles.deleteText}>删除</Text>
  </TouchableOpacity>
);

// 删除触发函数
const handleDelete = (articleId) => {
  // 此处Alert未正常弹出
  Alert.alert(
    '确认删除',
    'Are you sure that you want to Delete this article?',
    [
      { text: '取消', style: 'cancel' },
      { text: '确认', onPress: () => { /* 执行实际删除逻辑 */ } }
    ]
  );
};

const styles = StyleSheet.create({
  deleteButton: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ff4444',
    width: 75,
    height: '100%'
  },
  deleteText: {
    color: '#fff',
    fontWeight: 'bold'
  }
});

内容的提问来源于stack exchange,提问作者random512

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.22 06:55:03