有没有映射屏幕的方法
Is there a method to map screens
我正在使用 React Native 创建一个测验应用程序。为此,我需要 10 个屏幕,其中包含不同的问题和选项(即相同的布局。仅更改问题和选项)。那么为了实现这一点,是否有任何方法可以映射问题数组的每个元素并分别在每个屏幕上显示?还是我需要手动实现? (我正在使用堆栈导航器进行导航)
当您导航到 question/answers 屏幕时,将当前问题编号作为 index
传递 - 第一次传递 0
。
然后显示 QuestionArray[index]
这样的问题。当您想转到下一个问题时,只需将索引增加 1
并使用 index
将同一屏幕推至导航,依此类推。您可以在将屏幕推送到导航堆栈之前检查当前索引值,如果值已经是 9
,则计算结果并将堆栈替换为结果屏幕
您可以使用Flatlist
映射每个元素
<Flatlist
data={QuizArr}
renderItem={({ Ques, Ans, onNext })=><RenderQuiz {...{ Ques, Ans, onNext }} />}
keyExtractor={item => item.id}
/>
RenderQuiz=({ Ques, Ans, onNext })=>{
return(
// Your Code
)
}
我正在使用 React Native 创建一个测验应用程序。为此,我需要 10 个屏幕,其中包含不同的问题和选项(即相同的布局。仅更改问题和选项)。那么为了实现这一点,是否有任何方法可以映射问题数组的每个元素并分别在每个屏幕上显示?还是我需要手动实现? (我正在使用堆栈导航器进行导航)
当您导航到 question/answers 屏幕时,将当前问题编号作为 index
传递 - 第一次传递 0
。
然后显示 QuestionArray[index]
这样的问题。当您想转到下一个问题时,只需将索引增加 1
并使用 index
将同一屏幕推至导航,依此类推。您可以在将屏幕推送到导航堆栈之前检查当前索引值,如果值已经是 9
,则计算结果并将堆栈替换为结果屏幕
您可以使用Flatlist
映射每个元素
<Flatlist
data={QuizArr}
renderItem={({ Ques, Ans, onNext })=><RenderQuiz {...{ Ques, Ans, onNext }} />}
keyExtractor={item => item.id}
/>
RenderQuiz=({ Ques, Ans, onNext })=>{
return(
// Your Code
)
}