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

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

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

nestedScrollEnable={true}
滚动启用
给身高
当我开始开发这个应用程序时，我也遇到了同样的问题，然后我使用 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>

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

React-Native flatlist VirtualizedLists should never be nested inside plain ScrollViews

javascript

scrollview

react-native

react-native-flatlist