react-native - 使用 FlatList 或 UI 的加载状态 React Native 2D 网格滚动

Question

我有一个 React Native 组件，它由嵌套的 ScrollViews 组成以创建一个网格。我正在使用它来创建 54x54 元素的 2D 滑动器（屏幕上随时有 1 个元素）。我的问题是渲染组件需要一些时间（大约 8 秒），我想减少它，或者显示加载屏幕。我研究了使用嵌套的 FlatList 来代替它，它加载速度更快，但它不会制作 2D 网格，它会在水平滚动条中制作垂直滚动条——这不是我想要的。

所以我的问题是；我可以从 FlatList 制作一个 2D 网格（带有分页）吗？如果没有，我如何向我的组件添加加载状态（看到延迟似乎是在渲染 UI 而不是在后台获取数据）？

编辑：添加代码片段：

滚动视图示例：

<View style={{height: windowHeight, width: windowWidth}}>
    <ScrollView
        horizontal={true}
        pagingEnabled={true}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}>
        <ScrollView
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}>
          {qualities.map((quality, i) => {
            return <View style={{flexDirection: 'row'}} key={i}>
                {questions.map((question, j) => {
                    return  <View style={{height: windowHeight, width: windowWidth}} key={j}>
                      <QualityCard style={{flex:1,justifyContent: 'center', alignItems: 'center'}} question={question} quality={quality}></QualityCard>
                    </View>
                })}
            </View>
          })}
        </ScrollView>
    </ScrollView>
</View>

平面列表示例：

<View style={{height: windowHeight, width: windowWidth}}>
        <FlatList
          horizontal={true}
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
          data={questions}
          keyExtractor={_keyExtractor}
          renderItem={({ item: questionData }) =>(
            <View style={{flexDirection: 'row'}}>
              <FlatList
                pagingEnabled={true}
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
                data={qualities}
                keyExtractor={_keyExtractor}
                renderItem={({ item: qualityData}) => (
                  <View style={{height: windowHeight, width: windowWidth}}>
                    <QualityCard style={{flex:1,justifyContent: 'center', alignItems: 'center'}} question={questionData} quality={qualityData}></QualityCard>
                  </View>)}>
              </FlatList>
            </View>
          )}
          >
    </FlatList>
</View>

标签： react-native