ScrollViews 内的嵌套平面列表不滚动？

Question

FlatList 滚动问题：~ 我在 2 个滚动视图中滚动我的平面列表时遇到问题这里是我的代码结构请知道解决方案的任何人我将非常感谢 这是我的代码：

<ScrollView
        nestedScrollEnabled={true}
        style={styles.mainContainer}>
        <View style={{ height: 10, backgroundColor: '#000' }}>
        </View>
        <View style={{height: 90, backgroundColor: '#fff', flexDirection: 'row' }}>
        </View>
        <View style={{ backgroundColor: '#000', height: 50, flexDirection: 'row', justifyContent: 'space-between' }}>
        </View>
        <View style={styles.MidCards}>
        </View>
        <View style={styles.TasksDropDown}>
        </View>
        <View style={styles.TasksView}>
        </View>
        <View style={styles.ListsAllinone}>
            <ScrollView
            style={{flex:1}}
            horizontal={true}
            nestedScrollEnabled={true}
            pagingEnabled={true}
            showsHorizontalScrollIndicator={false}
            legacyImplementation={false}
            >
            <View nestedScrollEnabled={true} style={styles.List1}>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                </View>
                <FlatList
                data={DATA}
                renderItem={renderItem}
                keyExtractor={item => item.id}
                nestedScrollEnabled={true}
                />
            </View>
            <View style={styles.List1}>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                </View>
                <FlatList
                data={DATA}
                renderItem={renderItem}
                keyExtractor={item => item.id}
                />
            </View>
            <View style={styles.List1}>
                <FlatList
                data={DATA}
                renderItem={renderItem}
                keyExtractor={item => item.id}
                />
            </View>
            </ScrollView>
        </View>
        <View style={styles.footer}>
        </View>
    </ScrollView >
**Style sheet**
    const styles = StyleSheet.create({
    mainContainer: {
        flex: 1,
        backgroundColor: '#ddd'
    },
    TopAdvertisement: {
        flex: .2,
        height: 100,
        backgroundColor: '#fff'
    },
    TopBanner: {
        marginBottom: 10,
        height: 100,
    },
    footer: {
        height: 100,
        backgroundColor: '#000',
        padding:20
    },
    MidCards: {
        margin: 5,
        flexDirection: 'row',
        shadowRadius: 20,
        shadowOpacity: 5,
        borderRadius:5,
    },
    TasksDropDown: {
        margin: 5,
        marginHorizontal: 10,
        backgroundColor: '#fff',
        justifyContent: 'center',
        padding: 5,
        borderRadius:5,
    },
    TasksView: {
        margin: 5,
        marginHorizontal: 10,
        backgroundColor: '#fff',
        justifyContent: 'center',
        padding: 5,
        flexDirection: 'row',
        borderRadius:5,
    },
    ListsAllinone: {
        margin: 5,
        padding: 10,
    },
    List1: {
        flexGrow :1,
        //border:1,
        width: windowWidth - 30,
        backgroundColor: '#fff'
    },
    });

描述： 如您所见，我也使用了 nestedScrollEnabled={true} 属性但是 所有三个嵌套平面列表都不起作用 我怎样才能让它垂直滚动？我希望我的整个屏幕都具有可滚动属性以及带有水平滚动属性的嵌套 scrollView 并且嵌套最多的平面列表也应该滚动请谁能告诉我这里的问题是什么？我已经尝试了很多但未能解决这个问题

thanks :)

Answer 1

我已通过以下步骤修复了 ScrollView 中的嵌套平面列表不滚动问题：

1. Adding a view with fix height outside flatlist
2. Also fixed the height of the outer view same to height of newly added view
3. Add nestedScrollEnabled inside flatlist i.e  nestedScrollEnabled={true}

这是我的代码示例：

             <View nestedScrollEnabled={true} style={styles.List1}>//also fix heigth of this view same to height of inner vie
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                </View>
                <View style={{height:600}}>//newly added view
                   <FlatList
                    data={DATA}
                    renderItem={renderItem}
                    keyExtractor={item => item.id}
                    nestedScrollEnabled
                    />
               </View>
            </View>

ScrollViews 内的嵌套平面列表不滚动？

Nested Flatlists inside ScrollViews is not scrolling?

scroll

list

scrollview

react-native

flatlist