时间戳

首页 > 解决方案 > 如何将 FlatList 放在 React-native 的 ScrollView 中？

react-native - 如何将 FlatList 放在 React-native 的 ScrollView 中？

问题描述

我知道这些问题以前在stackoverflow中有过。但我无法为这个问题找到正确的解决方案。

有什么解决方案可以放入<FlatList/>in <ScrollView></ScrollView>react-native 中吗？

这是我的代码...

          <ScrollView
              onScroll={(e) => {
              onScroll(e);
              }}
              stickyHeaderIndices={[1]}
              contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
              style={{ width: '100%' }}
          >
              <View
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              
              {isLoading ? (
                <DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
              ) : (
                <FlatList
                  data={data}
                  keyExtractor={(item, index) => String(index)}
                  renderItem={({ item }) => (
                    <View
                      style={{
                        flex: 0,
                        padding: 5,
                      }}>
                      <Card style={styles.card}>
                        <CardItem header style={styles.cardText}>
                          <Title style={styles.textSign}>{item.question}</Title>
                        </CardItem>
                        <CardItem style={styles.cardText1}>
                          <Body>
                            <Paragraph>{item.answer}</Paragraph>
                          </Body>
                        </CardItem>
                      </Card>
                    </View>
                  )}
                />
              )}
              </View>
          </ScrollView>

错误如下：

错误 VirtualizedLists 永远不应嵌套在具有相同方向的普通 ScrollViews 中，因为它可能会破坏窗口和其他功能 - 请改用另一个 VirtualizedList 支持的容器。

标签： react-nativereact-native-androidreact-native-flatlistreact-native-scrollview

解决方案

发生这种情况是因为在 FlatList 内部也有一个 ScrollView，您可以做的是将您的 FlatList 包装在一个 View 中以分离 Scroll 的

InnerWrapper只是另一个视图

你可以像这样包装你的 FlatList：

          <ScrollView
              onScroll={(e) => {
              onScroll(e);
              }}
              stickyHeaderIndices={[1]}
              contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
              style={{ width: '100%' }}
          >
              <View
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              
              {isLoading ? (
                <DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
              ) : (
                <InnerWrapper>
                <FlatList
                  data={data}
                  keyExtractor={(item, index) => String(index)}
                  renderItem={({ item }) => (
                    <View
                      style={{
                        flex: 0,
                        padding: 5,
                      }}>
                      <Card style={styles.card}>
                        <CardItem header style={styles.cardText}>
                          <Title style={styles.textSign}>{item.question}</Title>
                        </CardItem>
                        <CardItem style={styles.cardText1}>
                          <Body>
                            <Paragraph>{item.answer}</Paragraph>
                          </Body>
                        </CardItem>
                      </Card>
                    </View>
                  )}
                />
              </InnewWrapper>
              )}
              </View>
          </ScrollView>

推荐阅读