从另一个模态响应本机打开模态

Question

嗨，我是 React Native 的新手。我想从另一个模式打开一个模式。我有一个显示事件详细信息的模式，用户可以删除此事件。当他们按下删除按钮时，我想添加另一个模式说 'are you sure ?' 如图 [![在此处输入图片描述][1]][1]

我的代码不起作用。我使用 onModalHide 和 setTimeOut 关闭第一个并打开第二个。但是没有用。这里可能是什么错误？

import React, {useRef, useState} from 'react';
import {View, ScrollView, Text, Pressable} from 'react-native';
import styles from '@/screens/dashboard/events/CreatedEventDetails.styles';
import Modal from 'react-native-modal';
import common from '@/config/common';
import {useDispatch, useSelector} from 'react-redux';
import FastImage from 'react-native-fast-image';
import images from '@/config/images';
import {Icon, LoadingIndicator} from '@/components';
import {
  closeEventDetailsModal,
  fetchEventsList,
  handleDeleteEvent,
  handleWithDrawEvent,
  LOADING,
} from '@/store/events/events';
import {EVENT_STATUS} from '@/constants/eventStatus';
import {strings} from '@/localization';
import moment from 'moment';

const CreatedEventDetails = ({isVisible, closeModal}) => {
  const createdEventDetails = useSelector(state => state?.events?.eventDetails);
  const userInfo = useSelector(state => state.profile.user);
  const dispatch = useDispatch();

  const currentEventId = useSelector(state => state.events.currentEventId);

  const isLoading =
    useSelector(state => state?.events?.eventResponseStatus) === LOADING;

  const capitilizedLetter = createdEventDetails?.name
    ?.toLowerCase()
    .charAt(0)
    .toUpperCase();
  const restOfTheName = createdEventDetails?.name?.slice(1);

  const deleteEvent = id => {
    dispatch(handleDeleteEvent(id));
    dispatch(closeEventDetailsModal());
  };

  const withDrawEvent = id => {
    dispatch(handleWithDrawEvent(id));
    dispatch(closeEventDetailsModal());
  };

  function getBgColor(condition) {
    switch (condition) {
      case EVENT_STATUS.STATUS_NEW:
        return '#ef9d50';
      case EVENT_STATUS.STATUS_ACCEPTED:
        return '#a1dc6a';
      case EVENT_STATUS.STATUS_TENTATIVE:
        return 'blue';
      case EVENT_STATUS.STATUS_REJECTED:
        return 'red';
      default:
        return '#ef9d50';
    }
  }

  // to change the modal action according to created events or accepted events, we have to check
  // if the logged in user id is matching with event owner id. ( delete - withdraw action )
  const isOwner = createdEventDetails?.owner?.id === userInfo?.id;

  const createdEventDate = createdEventDetails?.event_date;
  const formattedDate = moment(createdEventDate).format('DD MMM, ddd');

  const fromTime = createdEventDetails?.from_time?.toString();
  const formattedFromTime = moment(fromTime, 'hh:mm').format('LT');

  const toTime = createdEventDetails?.to_time?.toString();
  const formattedToTime = moment(toTime, 'hh:mm').format('LT');

  // second modal state
  const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);

  // second modal function
  const toggleModal = () => {
    // when the second modal is open, I close the first one here.
    dispatch(closeEventDetailsModal());
    setIsDeleteModalVisible(!isDeleteModalVisible);
  };

  return (
    <>
      <View style={styles.modalContainer}>
        <Modal
          isVisible={isVisible}
          propagateSwipe
          onBackdropPress={() => this.setState(isVisible)}
          onModalHide={() => {
            setTimeout(() => {
              setIsDeleteModalVisible(!isDeleteModalVisible);
            }, 100);
          }}
          onModalWillHide={() => {
            setTimeout(() => {
              dispatch(fetchEventsList());
            }, 500);
          }}>
          <View style={styles.content}>
            {/* we have to check if event id is matching with currentEventId to prevent undefined problem
          and also modal detail can have previous event detail. this will prevent the issue */}
            {createdEventDetails.id !== currentEventId ? (
              <LoadingIndicator visible />
            ) : (
              <View>
                <LoadingIndicator visible={isLoading} />
                <View style={styles.closeBtnContainer}>
                  <Pressable style={styles.closeBtn} onPress={closeModal}>
                    <Text style={styles.closeText}>X</Text>
                  </Pressable>
                </View>
                <View>
                  <Text
                    style={
                      styles.contentTitle
                    }>{`${capitilizedLetter}${restOfTheName}`}</Text>
                  <Text style={styles.contenSubtTitle}>
                    {formattedDate}
                    {'\n'}
                    {formattedFromTime} - {formattedToTime}
                  </Text>
                  <Text style={styles.contentText}>
                    At {createdEventDetails?.location}
                  </Text>
                  <View style={styles.participantsContainer}>
                    <Text style={styles.contentTitle}>
                      {strings.eventDetails.participantsTitle} (
                      {createdEventDetails?.invites?.length})
                    </Text>
                    <View style={common.stickyButtonLine} />
                    <ScrollView>
                      {createdEventDetails?.invites?.map(invite => (
                        <View style={styles.checkboxContainer} key={invite.id}>
                          <View style={styles.imageContainer}>
                            {invite?.user?.thumb ? (
                              <FastImage
                                source={{uri: invite?.user?.thumb}}
                                style={styles.listItemUserImage}
                                resizeMode={FastImage.resizeMode.cover}
                              />
                            ) : (
                              <Icon
                                icon={images.ic_user}
                                style={styles.noUserIcon}
                              />
                            )}
                            <Text style={styles.contentPersonName}>
                              {invite?.user?.name}
                            </Text>
                          </View>
                          <View
                            style={{
                              backgroundColor: getBgColor(invite?.status),
                              width: 25,
                              height: 25,
                              borderRadius: 25,
                            }}>
                            <Text>{''}</Text>
                          </View>
                        </View>
                      ))}
                    </ScrollView>
                  </View>
                  <View>
                    <View>
                      <Text style={styles.contentTitle}>
                        {strings.eventDetails.hobbiesTitle} (
                        {createdEventDetails?.hobbies?.length})
                      </Text>
                      <View style={common.stickyButtonLine} />
                      <View style={styles.hobbiesContainer}>
                        {createdEventDetails?.hobbies?.map(hobby => (
                          <View style={styles.emojiContainer} key={hobby.id}>
                            <Text>{hobby.emoji}</Text>
                          </View>
                        ))}
                      </View>
                      <View style={common.stickyButtonLine} />
                    </View>
                    <View style={[styles.buttons, styles.singleButtonAlign]}>
                      {isOwner ? (
                        <>
                          <Pressable
                            style={styles.decline}
                            onPress={toggleModal}
                            // onPress={() =>
                            //   deleteEvent(createdEventDetails?.id)
                            // }
                          >
                            <Text style={styles.declineText}>
                              {strings.eventDetails.delete}
                            </Text>
                          </Pressable>
                          // second modal content here 
                          {/* <Modal
                            isVisible={isDeleteModalVisible}
                            propagateSwipe>
                            <View style={styles.content}>
                              <Text>Hello!</Text>
                              <Pressable
                                title="Hide modal"
                                onPress={toggleModal}
                              />
                            </View>
                          </Modal> */}
                        </>
                      ) : (
                        <Pressable
                          style={styles.decline}
                          onPress={() =>
                            withDrawEvent(createdEventDetails?.id)
                          }>
                          <Text style={styles.declineText}>
                            {strings.eventDetails.withdraw}
                          </Text>
                        </Pressable>
                      )}
                    </View>
                  </View>
                </View>
              </View>
            )}
          </View>
        </Modal>
      </View>
     // second modal content here 
      <View style={styles.modalContainer}>
        <Modal isVisible={isDeleteModalVisible} propagateSwipe>
          <View style={styles.content}>
            <Text>Hello!</Text>
            <Pressable title="Hide modal" onPress={toggleModal} />
          </View>
        </Modal>
      </View>
    </>
  );
};;

export default CreatedEventDetails;
````


  [1]: https://i.stack.imgur.com/BUMfa.png

Answer 1

这里有一些调试方法。

首先通过逐一传递硬编码真值来检查模态是否显示。
如果它工作正常，请删除那些超时和 api调用和只需检查 useState 即可。
如果一切正常，请尝试致电 api.

从另一个模态响应本机打开模态

React Native Open Modal from another Modal

react-native