React Native实现循环依次弹出多个Modal的技术问题

我来帮你搞定这个问题～你现在的问题是直接把所有成就都塞进同一个Modal里了，所以看起来像是同时弹出一堆内容。要实现依次弹出，核心是跟踪当前显示的成就索引，每次只在Modal里展示当前索引对应的那一个成就，点击Collect后切换到下一个，直到全部展示完。

步骤1：添加状态跟踪当前成就索引 #

首先在组件的state里新增两个状态：一个控制Modal的显示/隐藏，一个记录当前展示的成就下标：

constructor(props) {
  super(props);
  this.state = {
    showAchievementModal: false,
    currentAchievementIndex: 0 // 新增：跟踪当前显示的成就索引
  };
}

步骤2：修改获取数据后的初始化逻辑 #

拿到成就列表后，重置索引到第一个，并打开第一个Modal：

getAchievements = () => {
  fetch(url + '/achievements', {
    method: 'get',
    headers: {
      Accept: 'application/json',
      'Content-type': 'application/json'
    }
  })
  .then((data) => data.json())
  .then((data) => {
    this.props.addData({ achievements: data.achievements })
    const achievements = this.props.store.achievements;
    if(achievements.length > 0) {
      this.setState({ 
        currentAchievementIndex: 0, // 重置索引到第一个成就
        showAchievementModal: true 
      })
    }
  })
  .catch((error) => {
    console.error(error)
  })
}

步骤3：修改Modal的渲染逻辑 #

不再遍历所有成就，只渲染当前索引对应的那一个成就内容：

render() {
  const { showAchievementModal, currentAchievementIndex } = this.state;
  const achievements = this.props.store.achievements;

  // 边界判断：没有成就、索引越界或Modal隐藏时，不渲染内容
  if (!showAchievementModal || achievements.length === 0 || currentAchievementIndex >= achievements.length) {
    return null;
  }

  const currentAchievement = achievements[currentAchievementIndex];

  return (
    <Modal animationType={'fade'} visible={showAchievementModal}>
      <View style={styles.container}>
        <Text>{currentAchievement.title}</Text>
        <Text>{currentAchievement.description}</Text>
        <TouchableOpacity onPress={this.closeModal}>
          <Text>Collect</Text>
        </TouchableOpacity>
      </View>
    </Modal>
  )
}

步骤4：实现关闭并切换下一个的逻辑 #

修改closeModal函数，点击Collect后判断是否还有下一个成就，有则切换索引并继续展示，没有则关闭Modal：

closeModal = () => {
  const { currentAchievementIndex } = this.state;
  const achievements = this.props.store.achievements;
  const nextIndex = currentAchievementIndex + 1;

  if (nextIndex < achievements.length) {
    // 还有下一个成就：更新索引并保持Modal显示（如果想要关闭再打开的动画，可以加个延迟）
    this.setState({
      currentAchievementIndex: nextIndex
    });
    // 想要动画效果的话，可以改成先关再开：
    // this.setState({ showAchievementModal: false });
    // setTimeout(() => {
    //   this.setState({
    //     currentAchievementIndex: nextIndex,
    //     showAchievementModal: true
    //   });
    // }, 300); // 对应Modal的fade动画时长
  } else {
    // 已经是最后一个成就：直接关闭Modal
    this.setState({ showAchievementModal: false });
  }
}

这样调整后，每次点击Collect按钮，就会切换到下一个成就的Modal，直到所有成就都展示完毕。另外建议统一用组件自身的showAchievementModal控制Modal显示，避免和props里的isModalAchievementVisible造成状态混乱～

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