React-Native flatlist VirtualizedLists 不应该嵌套在普通的 ScrollViews 中

Question

嘿，我是 react-native 的新手。我被困在平面列表和滚动视图中。这是我的代码结构：

<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，其他一切都会正常工作。

• 在ScrollView 中使用flexGrow: 1，则不需要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>