更新反应后得到警告：VirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中

Question

我正在开发一个 react 本机应用程序，并且我更新了我的 react 版本。 我在 ScrollView 中使用 Flatlist。 我收到了这个警告： VirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中 - 改用另一个 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>
);

Answer 1

我有同样的问题。查看我的代码

我所做的是我想在平面列表之外呈现的组件，我将它包含在 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}/>
               }
/>