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

【问题标题】：How to put FlatList inside of the ScrollView in React-native?如何将 FlatList 放在 React-native 的 ScrollView 中？
【发布时间】：2021-10-07 18:11:38
【问题描述】：

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

有什么解决方案可以将 <FlatList/> 放在 react-native 中的 <ScrollView></ScrollView> 内吗？

这是我的代码...

          <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 不应该嵌套在plain 中具有相同方向的滚动视图，因为它可以打破窗口和其他功能 - 使用另一个 VirtualizedList 支持的容器而是。

【问题讨论】：

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

标签： react-native react-native-android react-native-flatlist react-native-scrollview

【解决方案1】：

这是因为在 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>

【讨论】：

没用
您是否将两个卷轴分别包装在不同的视图中？

【解决方案2】：

由于您没有任何其他元素，请不要使用 ScrollView。使用此代码，因为 flatlist 本身会在其元素处滚动。

              <View
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              
              {isLoading ? (
                <DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
              ) : (
                <FlatList
style={{flex:1}}
                  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>

【讨论】：

【解决方案3】：

我找到了解决方案。我将我的 <ScrollView></ScrollView> 组件代码放在 <FlatList> ListHeaderComponent 道具中。

这是它的外观。我很确定这应该适用于每个人

我从这里找到了该解决方案。您可以参考它并且可以很容易地理解它。 How to Fix 'VirtualizedLists should never be nested inside plain ScrollViews' Warning

 <View
    style={{
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    }}>
    {isLoading ? (
      <DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
    ) : (
      <FlatList
        data={data}
        ListHeaderComponent={   //here I write ListHeaderComponent and put all code lines of `<ScrollView></ScrollView>` in here
          <View
            style={{
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Image
              source={require('../assets/Interview.png')}
              width="100%"
              height="0"
              style={styles.logo2}
            />
          </View>
        }
        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>

【讨论】：