React-Native 平面列表 VirtualizedList 永远不应该嵌套在普通 ScrollView 中

Question

嘿，我是反应原生的新手。我陷入了平面列表和滚动视图中。这是我的代码的结构：

<View>
    <ScollView>
        <View>
            <SafeAreaView>
                <FlatList/> -- Horizontal Scroll --
            </SafeAreaView>
        </View>
        <View>
        </View>
        <View>
            <FlatList/> -- Horizontal Scroll --
        </View>
        <View>
            <FlatList/> -- Horizontal Scroll -- //Issue        
        </View>
    </ScollView>
</View>

所以上面提到的问题平面列表就像//Issue。问题是，当我添加需要以垂直格式滚动的平面列表时，它不会滚动，并且该平面列表还显示在屏幕中间，因此要开始工作，我添加了高度并开始工作，但功能我想要的是当我滚动时屏幕应该向下移动。因此，我按照上面的结构添加了scrollView，但是当我添加scrollView时，我删除了它的高度，它开始完美工作，但显示该错误：

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

所以为了解决这个问题我尝试：

1. 嵌套滚动启用={true}
2. 滚动启用
3. 给出高度
4. 当我开始开发这个应用程序时，我也遇到同样的问题，然后我使用 ListHeaderComponent 和 ListFooterComponent 得到解决方案。但现在我已经在页眉和页脚组件中编写了代码。

但我无法解决。如果有人有一些想法，请分享。我会很感激你的青睐

Answer 1

根据，在ScrollView中使用FlatListReact-Native并不理想。您可以做的是使用嵌套滚动视图。唯一要改变的是你必须做的，并在from中填充数据，其他一切都会正常工作。.map()ScrollViewrenderItemFlatList

• flexGrow: 1在 内使用ScrollView, 则不需要height。

您的结构现在应该是：

<View style={{flex: 1}} >
    <ScollView style={{flexGrow: 1}} 
     nestedScrollEnabled={true}>
        <View>
            <SafeAreaView>
                <ScrollView horizontal 
                style={{width: '100%', height: 'your_height'}}>
                  {data.map(item, index) => (
                    <View key={index}>
                      // Your component
                    </View>
                  )}
                </ScrollView> -- Horizontal Scroll --
            </SafeAreaView>
        </View>
        <View>
        </View>
        <View>
            <ScrollView horizontal 
            style={{width: '100%', height: 'your_height'}}>
                  {anotherData.map(item, index) => (
                    <View key={index}>
                      // Your component
                    </View>
                  )}
            </ScrollView> -- Horizontal Scroll --
        </View>
        <View>
            <ScrollView horizontal
            style={{width: '100%', height: 'your_height'}}>
                  {newData.map(item, index) => (
                    <View key={index}>
                      // Your component
                    </View>
                  )}
            </ScrollView> -- Horizontal Scroll --      
        </View>
    </ScrollView>
</View>