[英]React-native issue performance
So today i want to create exam app and display answer (and where user mark answer) .所以今天我想创建考试应用程序并显示答案(以及用户标记答案的位置)。 So i used that library for radio buttons.
所以我将该 库用于单选按钮。 My code so far (part of it) -
到目前为止我的代码(其中的一部分)-
<FlatList
// key={stepRef}
data={questions}
renderItem={(data) => {
let i = data && data.index;
let questionStyle = {};
if (i != stepRef) questionStyle = { display: "none" };
return (
<RadioButtonRN
key={i}
style={questionStyle}
textStyle={{ color: "white" }}
boxStyle={{ backgroundColor: "#1b1b36" }}
deactiveColor="#5a5c75"
// animationTypes={["shake"]}
activeColor="#25c79c"
data={questions[i].answers.map((item, index) => ({
label: item.text,
id: index,
}))}
selectedBtn={(e) => {
// questions[i].answers[e.id].userInput = true;
// questions[stepRef].isAnswered = true;
// for (let j = 0; j <= 3; j++) {
// if (j != e.id) {
// questions[i].answers[j].userInput = false;
// }
// }
// setQuestions(questions);
}}
/>
);
}}
/>
But i recommend to visit stack expo for full code .但我建议访问堆栈博览会以获取完整代码。 So my problem here is that i have performance issue!
所以我的问题是我有性能问题! In web test everything works fine but when i ran this code on the android phone (from 2018 for example) it lagging (change step very slowly) when i click next question.
在网络测试中,一切正常,但是当我在 android 手机上运行此代码时(例如从 2018 年开始),当我单击下一个问题时,它会滞后(更改步骤非常缓慢)。 I think thats because it load many data at once.
我认为那是因为它一次加载了很多数据。 For that reason i used FlatList but nothing happened again?
出于这个原因,我使用了 FlatList 但什么也没发生? Now i dont know how to fix that.
现在我不知道如何解决这个问题。 See video example .
参见视频示例。 And now i dont know how to fix this delay when switching steps?
现在我不知道如何在切换步骤时解决这个延迟?
You are using the wrong approach.您使用了错误的方法。
There is no need to use a flatlist if you need to show just few items.如果您只需要显示几个项目,则无需使用平面列表。
A scrollview will be good with great performance:滚动视图将具有出色的性能:
const [answers, setAnswers] = React.useState([]);
<View style={styles.container}>
<ScrollView>
<RadioButtonRN
textStyle={{ color: "white" }}
boxStyle={{ backgroundColor: "#1b1b36" }}
deactiveColor="#5a5c75"
// animationTypes={["shake"]}
activeColor="#25c79c"
data={questions[stepRef].answers.map((item, index) => ({
label: item.text,
id: index,
}))}
selectedBtn={(e) => {
if (e) {
const newAnswersList = [...answers];
newAnswersList[stepRef] = Number(e.id)+1;
setAnswers(newAnswersList);
}
}}
/>
</ScrollView>
<Button title="Next question" onPress={() => nextEle()} />
<Button title="Prev question" onPress={() => prevEle()} />
<Text>current question is {stepRef}</Text>
</View>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.