Question

React-native 问题性能

2021-07-21

147

javascript react-native

所以今天我想创建考试应用程序并显示答案（以及用户标记答案的位置）。所以我使用了库作为单选按钮。到目前为止我的代码（部分）-

                   <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);
                          }}
                        />
                      );
                    }}
                  />

但我建议访问 stack expo 获取完整代码。所以我的问题是我有性能问题！在网络测试中一切正常，但是当我在 android 手机上运行此代码（例如从 2018 年开始）时，当我单击下一个问题时，它会滞后（更改步骤非常缓慢）。我认为这是因为它一次加载了许多数据。出于这个原因，我使用了 FlatList，但什么也没发生？现在我不知道如何解决这个问题。请参阅视频示例。现在我不知道如何解决切换步骤时出现的延迟问题？

Answer 1

您使用了错误的方法。

如果您只需要显示几个项目，则无需使用 flatlist。

scrollview 性能很好：

  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>