如何集成随机数生成代码实现React Native答题应用题目随机展示

不需要直接复用网页端的DOM相关逻辑，基于React Native状态驱动的特性，用Fisher-Yates洗牌算法实现无重复乱序出题，性能和稳定性都优于逐次生成随机数判重的方案，适配步骤如下：

前置确认 #

首先确认你的Questions.js导出的QuizArray结构符合预期，示例结构参考：

// Questions.js
export const QuizArray = [
  { id: 1, question: "React Native的核心开发语言是？", answer: "JavaScript/TypeScript" },
  { id: 2, question: "Android虚拟设备的缩写是？", answer: "AVD" },
  // 剩余题目结构保持一致即可
]

步骤1：实现洗牌工具函数 #

这个算法会均匀打乱数组，完全避免重复出题的问题，不需要额外做重复校验：

// 可以放在DetailsScreen组件文件顶部，或者单独抽成通用工具文件
const shuffleArray = (originArray) => {
  // 浅拷贝原数组，避免修改原始题库
  const array = [...originArray];
  let currentIndex = array.length;
  let randomIndex;
  while (currentIndex > 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
  }
  return array;
}

步骤2：改造DetailsScreen组件 #

通过状态管理打乱后的题库和当前答题进度，组件初始化时仅执行一次洗牌，保证同一轮答题的题目顺序固定：

import React, { useState, useEffect } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
// 替换为你实际的Questions.js路径
import { QuizArray } from './Questions.js';

const DetailsScreen = () => {
  // 存储打乱后的题库
  const [shuffledQuizzes, setShuffledQuizzes] = useState([]);
  // 存储当前题目索引
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    // 组件加载时仅执行一次洗牌
    const randomQuizzes = shuffleArray(QuizArray);
    setShuffledQuizzes(randomQuizzes);
  }, []);

  // 题库未加载完成时的兜底展示
  if (shuffledQuizzes.length === 0) {
    return <Text style={styles.loadingText}>题目加载中...</Text>
  }

  // 直接从打乱后的数组取当前题目，天然保证不重复
  const currentQuiz = shuffledQuizzes[currentIndex];

  // 下一题逻辑
  const handleNext = () => {
    if (currentIndex < shuffledQuizzes.length - 1) {
      setCurrentIndex(prev => prev + 1);
    } else {
      // 所有题目答完的自定义逻辑，比如跳转结果页、重置答题
      alert("已完成全部题目");
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.idText}>题目编号：{currentQuiz.id}</Text>
      <Text style={styles.questionText}>{currentQuiz.question}</Text>
      <Text style={styles.answerText}>正确答案：{currentQuiz.answer}</Text>
      <Button title="下一题" onPress={handleNext} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    flex: 1,
  },
  loadingText: {
    fontSize: 16,
    textAlign: 'center',
    marginTop: 50,
  },
  idText: {
    fontSize: 14,
    color: '#666',
    marginBottom: 10,
  },
  questionText: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  answerText: {
    fontSize: 16,
    color: '#2ecc71',
    marginBottom: 30,
  }
});

export default DetailsScreen;

适配说明 #

你手里的网页端示例代码大概率包含DOM操作、随机数去重校验逻辑，直接全部替换为上述洗牌逻辑即可，不需要保留网页端的DOM相关代码，该方案完全适配React Native的开发模式，同时满足无重复随机出题的需求，且支持匹配id/question/answer三个属性的展示要求。

注意事项 #

• 如果你需要重置答题顺序，重新调用shuffleArray(QuizArray)赋值给shuffledQuizzes、同时把currentIndex置为0即可
• 不要直接修改原始QuizArray数组，上述代码已经做了浅拷贝处理，避免影响其他用到原始题库的页面逻辑
• 如果需要跨页面保存答题进度，可以把shuffledQuizzes和currentIndex存储到全局状态或者AsyncStorage中

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