React native 更新后获取警告：VirtualizedList不应嵌套在具有相同方向的纯滚动视图中

我正在开发react本机应用程序，并更新了react版本。 我在ScrollView中使用Flatlist。 我得到这个警告： VirtualizedList不应嵌套在具有相同方向的纯滚动视图中-请改用另一个VirtualizedList支持的容器

我的组成部分：

    return (
  <KeyboardAvoidingView behavior="padding" enabled style={styles.keyboardAvoidingView}>
    <SafeAreaView style={styles.keyboardAvoidingView}>
      <Header
        ..
        }}
        containerStyle={styles.headerContainer}
        rightComponent={{
          ...
        }}
      />
      <ScrollView style={styles.body}>
        <View style={styles.titleSection}>
          <Text style={styles.stepTitle}>Étape 1/3</Text>
          <Text style={styles.questionTitle}>Quel contact voulez-vous partager ?</Text>
        </View>
        <View>
          <FlatList
            data={contacts}
            renderItem={({ item, index }) => (
              <TouchableHighlight onPress={() => this.onItemClickHandler(index, item.id, item.firstName, item.lastName)} style={styles.touchableHighlight}>
                <View>
                  <ListItem
                    chevron={
                      (
                        <Icon
                          color={this.state.selectedIndex === index
                            ? `${defaultTheme.palette.white.main}`
                            : `${defaultTheme.palette.primary.dark}`}
                          name="chevron-right"
                          size={40}
                          type="material"
                        />
                      )
                    }
                    containerStyle={
                      this.state.selectedIndex === index
                        ? styles.selected
                        : styles.notSelected
                    }
                    leftElement={
                      (
                        <Icon
                          ...
                        />
                      )
                    }
                    title={`${item.firstName} ${item.lastName}`}
                    titleStyle={this.state.selectedIndex === index
                      ? [styles.titleStyle, styles.titleSelected]
                      : [styles.titleStyle, styles.defaultTitle]}
                  />
                </View>
              </TouchableHighlight>
            )}
            extraData={this.state.selectedIndex}
            keyExtractor={(item) => item.email}
            ListHeaderComponent={this.renderHeader(searchValue)}
            style={styles.flatListStyle}
            ListFooterComponent={this.renderFooter}
          />
          {
            (contacts.length > 0 && page > 0)
            && <CustomButton title="Afficher la suite" onPress={() => this.makeRemoteRequest()} loading={loading} disabled={loading} />
          }
        </View>
      </ScrollView>
    </SafeAreaView>
  </KeyboardAvoidingView>
);

返回(
É磁带1/3
请联系您的合作伙伴？
(
this.onItemClickHandler（index，item.id，item.firstName，item.lastName）}style={styles.touchableHighlight}>
)}
extraData={this.state.selectedIndex}
keyExtractor={（项）=>item.email}
ListHeaderComponent={this.renderHeader（searchValue）}
style={style.flatListStyle}
ListFooterComponent={this.renderFooter}
/>
{
（contacts.length>0&&page>0）
&&this.makeRemoteRequest（）}loading={loading}disabled={loading}/>
}
);

我也有同样的问题。看到我的代码了吗

我所做的是我想在平面列表之外呈现的组件，我将其包含在ListHeaderComponent中，并删除了Scrollview组件。现在它工作正常，没有任何警告

以下是先前的代码：

<ScrollView >
           <ReadCard data={this.state.data}/>
           <FlatList
                      data={this.state.data.related}
                       keyExtractor={this._keyExtractor}
                       renderItem={this._renderItem}
                       ItemSeparatorComponent={ListSeprator}
                  />
</ScrollView>

以下是更改后的代码，没有任何警告：

<FlatList
               data={this.state.data.related}
               keyExtractor={this._keyExtractor}
               renderItem={this._renderItem}
               ItemSeparatorComponent={ListSeprator}
               ListHeaderComponent={
                    <ReadCard data={this.state.data}/>
               }
/>

---

我也有同样的问题。看到我的代码了吗

我所做的是我想在平面列表之外呈现的组件，我将其包含在ListHeaderComponent中，并删除了Scrollview组件。现在它工作正常，没有任何警告

以下是先前的代码：

<ScrollView >
           <ReadCard data={this.state.data}/>
           <FlatList
                      data={this.state.data.related}
                       keyExtractor={this._keyExtractor}
                       renderItem={this._renderItem}
                       ItemSeparatorComponent={ListSeprator}
                  />
</ScrollView>

以下是更改后的代码，没有任何警告：

<FlatList
               data={this.state.data.related}
               keyExtractor={this._keyExtractor}
               renderItem={this._renderItem}
               ItemSeparatorComponent={ListSeprator}
               ListHeaderComponent={
                    <ReadCard data={this.state.data}/>
               }
/>

如果我删除scrollView，则没有滚动，也无法滚动以查找所有数据您可以将滚动视图添加到iThank我通过删除scrollView中的平面列表来解决问题如果我删除scrollView，则没有滚动，也无法滚动以查找所有数据您可以将滚动视图添加到iThank我通过删除滚动视图中的平面列表