React Native开发答题APP如何遍历题目数组映射生成对应答题页面？

完全可以通过遍历题目数组动态生成对应页面，不需要手动单独创建10个页面，这也是这类高复用性场景的最优实现方案。

两种可行实现方式 #

方式1：动态生成多条路由（匹配你的需求） #

你只需要开发1个通用的题目展示组件，遍历题目数组生成对应路由即可，代码参考如下：

// 题目配置数组，所有题目内容统一维护在这里
const questionList = [
  { id: 1, title: "题干1", options: ["选项A", "选项B", "选项C", "选项D"], answer: "B" },
  // 剩余9道题的配置直接在数组里补充即可
]

// 通用题目页面组件，布局只写1次
const QuestionScreen = ({ route }) => {
  // 从路由参数获取当前题目的内容
  const { question } = route.params
  return (
    <View style={/* 你的通用布局样式 */}>
      <Text style={styles.title}>{question.title}</Text>
      {question.options.map((opt, idx) => (
        <TouchableOpacity key={idx} style={styles.optionItem}>
          <Text>{opt}</Text>
        </TouchableOpacity>
      ))}
    </View>
  )
}

// Stack路由配置处遍历生成10个题目的路由
<Stack.Navigator>
  {/* 其他固定路由，比如首页、得分页等 */}
  <Stack.Screen name="Home" component={HomeScreen} />
  {/* 动态生成所有题目路由 */}
  {questionList.map(q => (
    <Stack.Screen
      key={q.id}
      name={`Question_${q.id}`}
      component={QuestionScreen}
      initialParams={{ question: q }}
    />
  ))}
</Stack.Navigator>

跳转时直接使用对应路由名即可：

// 跳转第3题示例
navigation.navigate(`Question_3`)

方式2：单路由动态传参（更推荐，维护成本更低） #

如果不需要给每道题单独分配路由名，更建议只注册1个通用题目路由，跳转时动态传入不同题目参数即可，后续题目数量变更不需要修改路由配置：

// 路由配置只写1次
<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Question" component={QuestionScreen} />
</Stack.Navigator>

// 跳转时传入对应题目数据
// 跳第1题
navigation.navigate("Question", { question: questionList[0] })
// 跳第5题
navigation.navigate("Question", { question: questionList[4] })

内容的提问来源于stack exchange，提问作者Vivek K J