React Native如何在当前弹窗关闭后依次展示数组内容，最后显示自定义弹窗

核心逻辑 #

整个实现的核心是通过索引状态控制当前展示的活动项，根据索引边界切换两种弹窗的显隐：

• 维护currentActivityIndex状态记录当前遍历到的活动项下标，初始值为0
• 维护两个弹窗显隐状态：showActivityModal（控制活动项弹窗显隐）、showFinishModal（控制收尾弹窗显隐）
• 活动项弹窗的标题直接读取activities[currentActivityIndex].title，其余样式保持统一即可

现有dialog/modal组件示例效果如下：

下一步按钮点击逻辑 #

点击save/下一步按钮时按以下顺序处理：

1. 将currentActivityIndex值加1
2. 判断更新后的索引是否大于等于activities数组的总长度：
   • 是：关闭活动项弹窗（showActivityModal = false），打开收尾弹窗（showFinishModal = true）
   • 否：直接更新活动项弹窗的标题内容即可，无需关闭弹窗

如果你使用的弹窗组件存在内容缓存、更新索引后不刷新内容的问题，可以在索引更新后先将showActivityModal设为false，等DOM更新后再设为true，强制弹窗重新渲染即可。

代码示例（React） #

import { useState } from 'react'
// 导入你自己的弹窗组件
import { ActivityModal, FinishModal } from './your-modal-components'

// 你的activities数组
export const activities = [
  {
    title: "Take the Stairs",
    progressOverview: {
      notSatisfied: 5,
      neutral: 0,
      satisfied: 2,
    },
  },
  {
    title: "5 Set of Sit-Ups",
    progressOverview: {
      notSatisfied: 3,
      neutral: 2,
      satisfied: 5,
    },
  },
  {
    title: "3 Sets of Push-Ups",
    progressOverview: {
      notSatisfied: 7,
      neutral: 3,
      satisfied: 1,
    },
  },
  {
    title: "Weight Lifting",
    progressOverview: {
      notSatisfied: 3,
      neutral: 2,
      satisfied: 0,
    },
  },
]

function App() {
  const [currentActivityIndex, setCurrentActivityIndex] = useState(0)
  const [showActivityModal, setShowActivityModal] = useState(true)
  const [showFinishModal, setShowFinishModal] = useState(false)

  const handleNext = () => {
    const nextIndex = currentActivityIndex + 1
    if (nextIndex >= activities.length) {
      setShowActivityModal(false)
      setShowFinishModal(true)
      return
    }
    setCurrentActivityIndex(nextIndex)
  }

  // 关闭弹窗重置状态的逻辑，按需添加
  const handleClose = () => {
    setShowActivityModal(false)
    setShowFinishModal(false)
    setCurrentActivityIndex(0)
  }

  return (
    <div>
      {/* 活动项弹窗 */}
      <ActivityModal 
        visible={showActivityModal}
        title={activities[currentActivityIndex].title}
        onSave={handleNext}
        onClose={handleClose}
      />
      {/* 收尾弹窗 */}
      <FinishModal
        visible={showFinishModal}
        onClose={handleClose}
      />
    </div>
  )
}

代码示例（Vue3） #

<template>
  <!-- 活动项弹窗 -->
  <ActivityModal
    v-model:visible="showActivityModal"
    :title="activities[currentActivityIndex].title"
    @save="handleNext"
    @close="handleClose"
  />
  <!-- 收尾弹窗 -->
  <FinishModal
    v-model:visible="showFinishModal"
    @close="handleClose"
  />
</template>

<script setup>
import { ref } from 'vue'
import { ActivityModal, FinishModal } from './your-modal-components.vue'

export const activities = [
  {
    title: "Take the Stairs",
    progressOverview: {
      notSatisfied: 5,
      neutral: 0,
      satisfied: 2,
    },
  },
  {
    title: "5 Set of Sit-Ups",
    progressOverview: {
      notSatisfied: 3,
      neutral: 2,
      satisfied: 5,
    },
  },
  {
    title: "3 Sets of Push-Ups",
    progressOverview: {
      notSatisfied: 7,
      neutral: 3,
      satisfied: 1,
    },
  },
  {
    title: "Weight Lifting",
    progressOverview: {
      notSatisfied: 3,
      neutral: 2,
      satisfied: 0,
    },
  },
]

const currentActivityIndex = ref(0)
const showActivityModal = ref(true)
const showFinishModal = ref(false)

const handleNext = () => {
  const nextIndex = currentActivityIndex.value + 1
  if (nextIndex >= activities.length) {
    showActivityModal.value = false
    showFinishModal.value = true
    return
  }
  currentActivityIndex.value = nextIndex
}

const handleClose = () => {
  showActivityModal.value = false
  showFinishModal.value = false
  currentActivityIndex.value = 0
}
</script>

内容的提问来源于stack exchange，提问作者Lê Quốc Khánh