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。问题是，当我添加需要以垂直格式滚动的平面列表时，它不会滚动，并且该平面列表还显示在屏幕中间，因此要开始工作，我添加了高度并开始工作，但功能我想要的是当我滚动时屏幕应该向下移动。因此，这样做我会像上面的结构中一样添加滚动视图，但是当我添加滚动视图时，我删除了它的高度，它开始完美工作，但显示该错误：

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

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

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

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

Answer 1

根据

React-Native

，在ScrollView中使用FlatList并不理想。您可以做的是使用嵌套滚动视图。唯一要改变的是你必须做

.map()

，并在

ScrollView

中填充数据，尽管

renderItem

来自

FlatList

，其他一切都会正常工作。

• 使用

  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>

Answer 2

因为 flatlist 和 scrollView 都有垂直方向，这就是它给出错误的原因。你需要做的是将你的平面列表封装在另一个滚动视图中，并使其方向像这样水平

<ScrollView horizontal={true} contentContinaerStyle={{flexGrow: 1}}>
    <FlatList>
</ScrollView>

这里通过使用flexGrow 1，scrollView将占据整个宽度