React Native切换选中座位时避免Modal关闭重开问题修复

问题分析 #

当前点击切换座位时Modal关闭重开，核心原因大概率是**isVisible状态被意外修改**，或是组件渲染逻辑导致Modal被重复卸载/挂载。从你提供的代码看，handleClick仅修改isActive，需确保控制Modal显示的isVisible状态只在打开/关闭操作时变更，不受座位选择逻辑影响。

解决方案步骤 #

1. 隔离Modal显示状态与座位选择逻辑 #

仅让打开/关闭Modal的操作（比如外部触发按钮、Modal内的关闭按钮）修改isVisible，handleClick只负责更新选中座位的状态：

// 打开Modal的逻辑
const openModal = () => {
  setIsVisible(true);
};

// 关闭Modal的逻辑
const onClose = () => {
  setIsVisible(false);
};

// 座位点击逻辑仅更新选中状态
const handleClick = (number) => {
  setIsActive(number);
};

2. 添加平滑切换样式 #

给座位的选中/未选中样式添加过渡动画，让状态切换更自然：

const styles = StyleSheet.create({
  circle: {
    width: 40,
    height: 40,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#ccc',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 8,
    // 过渡效果
    transitionProperty: 'backgroundColor, borderColor',
    transitionDuration: '200ms',
  },
  activecircle: {
    width: 40,
    height: 40,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#1677ff',
    backgroundColor: '#e6f4ff',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 8,
    // 保持过渡效果
    transitionProperty: 'backgroundColor, borderColor',
    transitionDuration: '200ms',
  },
  noofseat: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 12,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
});

3. 完整优化后代码示例 #

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Modal, StyleSheet } from 'react-native';

const SeatSelectionModal = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [isActive, setIsActive] = useState(null);

  const openModal = () => {
    setIsVisible(true);
  };

  const onClose = () => {
    setIsVisible(false);
  };

  const handleClick = (number) => {
    setIsActive(number);
  };

  const seats = Array(10).fill().map((_, i) => (
    <TouchableOpacity
      key={i + 1}
      style={isActive === i + 1 ? styles.activecircle : styles.circle}
      onPress={() => handleClick(i + 1)}
    >
      <Text>{i + 1}</Text>
    </TouchableOpacity>
  ));

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      {/* 打开Modal的按钮 */}
      <TouchableOpacity onPress={openModal} style={styles.openBtn}>
        <Text>选择座位</Text>
      </TouchableOpacity>

      <Modal
        animationType="slide"
        transparent={true}
        visible={isVisible}
        onRequestClose={onClose}
      >
        {/* 遮罩层，点击可关闭Modal */}
        <TouchableOpacity style={styles.modalOverlay} onPress={onClose} activeOpacity={1}>
          <TouchableOpacity style={styles.noofseat} activeOpacity={1}>
            {seats}
            {/* 确认按钮 */}
            <TouchableOpacity onPress={onClose} style={styles.confirmBtn}>
              <Text>确认选择</Text>
            </TouchableOpacity>
          </TouchableOpacity>
        </TouchableOpacity>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  openBtn: {
    padding: 10,
    backgroundColor: '#1677ff',
    borderRadius: 8,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  noofseat: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 12,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    gap: 10,
  },
  circle: {
    width: 40,
    height: 40,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#ccc',
    justifyContent: 'center',
    alignItems: 'center',
    transitionProperty: 'backgroundColor, borderColor',
    transitionDuration: '200ms',
  },
  activecircle: {
    width: 40,
    height: 40,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#1677ff',
    backgroundColor: '#e6f4ff',
    justifyContent: 'center',
    alignItems: 'center',
    transitionProperty: 'backgroundColor, borderColor',
    transitionDuration: '200ms',
  },
  confirmBtn: {
    marginTop: 20,
    width: '100%',
    padding: 12,
    backgroundColor: '#1677ff',
    borderRadius: 8,
    alignItems: 'center',
  },
});

export default SeatSelectionModal;

关键说明 #

• 新增Modal遮罩层，点击遮罩可关闭Modal，同时避免内部座位点击触发关闭
• 给座位样式添加过渡属性，实现选中状态的平滑切换
• 严格隔离isVisible和isActive的修改逻辑，确保座位选择不会影响Modal的显示状态

内容的提问来源于stack exchange，提问作者Mohammed Maheswer