Как поместить плоский список внутри представления прокрутки в React-native?

#react-native #react-native-android #react-native-flatlist #react-native-scrollview

Вопрос:

Я знаю, что такого рода вопросы уже возникали в stackoverflow раньше. Но я не могу найти правильное решение этой проблемы.

Есть ли какое-либо решение для размещения <FlatList/> внутри <ScrollView></ScrollView> in 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>
 

Ошибка выдает следующее:

ОШИБКА Виртуализированные списки никогда не должны быть вложены в простые представления прокрутки с одинаковой ориентацией, потому что это может нарушить работу окон и другие функции — вместо этого используйте другой контейнер с поддержкой виртуализированных списков.

Комментарии:

1. это происходит потому, что внутри плоского списка также есть представление прокрутки, что вы можете сделать, это обернуть свой плоский список в представление, чтобы отделить прокрутку

Ответ №1:

это происходит потому, что внутри плоского списка также есть представление прокрутки, что вы можете сделать, это обернуть свой плоский список в представление, чтобы отделить прокрутку

Внутренняя оболочка-это всего лишь другой взгляд

вы можете завернуть свой плоский список вот так:

           <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>
 

Комментарии:

1. это не помогает

2. вы завернули два свитка в разные виды?

Ответ №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 реквизита.

Вот как это выглядит. Я почти уверен, что это должно сработать для каждого

Я нашел это решение отсюда. вы можете сослаться на него и можете понять его очень легко. Как исправить предупреждение «Виртуализированные списки никогда не должны быть вложены в обычные просмотры прокрутки»

  <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>