底部表单的滚动行为问题

Question

我正在使用这个库“react-native-simple-bottom-sheet”。我对滚动行为有一些疑问。我已将此底页与另一个屏幕集成在一起。基本上，当有人触摸文本“Truminds”时，底页就会弹出。问题是，当我尝试滚动底部工作表时，背景屏幕被滚动并且底部工作表内没有响应。我附上了演示问题“https://drive.google.com/file/d/1iPN-wsqH4P4rB23jqWDr1NSQEvzSkeeY/view?usp=sharing”的视频链接。

以下是供您参考的代码：

import React, { useRef, useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, FlatList, Dimensions } from 'react-native';
import BottomSheet from 'react-native-simple-bottom-sheet';
import { LayoutAnimation } from 'react-native';
import { fontFamily } from '../../../assets/styles/FontStyle';
import DownArrowIcon from "../../../assets/img/icons/bottom_sheet_down_arrow.svg";
import UpArrowIcon from "../../../assets/img/icons/bottom_sheet_up_arrow.svg";
import RightArrowIcon from "../../../assets/img/icons/bottom_sheet_right_arrow.svg";
import CloseIcon from "../../../assets/img/icons/bottom_sheet_close_icon.svg";

type SpaceBottomSheetProps = {
    onClose: () => void;
}

const SpaceBottomSheet = ({ onClose }: SpaceBottomSheetProps) => {
    const bottomSheetRef = useRef<{ togglePanel: () => void; } | null>(); /*it seems like there's no @types entry for react-native-simple-bottom-sheet, could've just passed the type like this: useRef<BottomSheetType | null>(). That way we tell Typescript that either null (default value) or BottomSheetType (a type we currently can't import from anywhere, but can construct the type ourselves) will be the value in bottomSheetRef.current if .current is not null. */
    const [expandedItem, setExpandedItem] = useState(null);
    const screenHeight = Dimensions.get('screen').height;
    const bottomSheetHeight = screenHeight * 0.85;

    const closeBottomSheet = () => {
        if (bottomSheetRef.current) {
            bottomSheetRef.current.togglePanel();
            onClose(); // Call the onClose function when the bottom sheet is closed
        }
    };

    const data = [
        { label: '2D Test' },
        { label: '2D Testing 2' },
        { label: '2D Testing 3' },
        { label: '2D Testing 1' },
        { label: '2D Testzaffar' },
        { label: '2D TestZaffar' },
    ];

    const expandedData = [
        { label: 'Dashboard' },
        { label: 'List of Subspaces' },
        { label: 'View Space Details' },
        { label: 'Create Subspace' },
    ];

    const renderItem = ({ item, index }) => {
        const isExpanded = expandedItem === index;

        const handlePress = () => {
            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
            setExpandedItem(isExpanded ? null : index);
        };

        return (
            <View style={styles.itemContainer}>
                <TouchableOpacity onPress={handlePress}>
                    <View style={styles.labelContainer}>
                        <Text style={styles.label}>{item.label}</Text>
                        {isExpanded ? (
                            <UpArrowIcon width={12} height={10} style={styles.arrowIcon} />
                        ) : (
                            <DownArrowIcon width={12} height={10} style={styles.arrowIcon} />
                        )}
                    </View>
                </TouchableOpacity>
                {isExpanded && (
                    <FlatList
                        data={expandedData}
                        renderItem={({ item }) => (
                            <>
                                <TouchableOpacity style={styles.rowContainer}>
                                    <View style={styles.row}>
                                        <Text style={styles.rowLabel}>{item.label}</Text>
                                        <RightArrowIcon style={styles.rowArrowIcon} />
                                    </View>
                                </TouchableOpacity>
                                {item.label === 'List of Subspaces' && <View style={styles.separator} />}
                            </>
                        )}
                        keyExtractor={(item) => item.label}
                    />
                )}
            </View>
        );
    };
    //console.log('bottomSheetHeight:', bottomSheetHeight);
    return (
        <View style={styles.container}>
            <BottomSheet ref={bottomSheetRef} sliderMaxHeight={bottomSheetHeight} sliderMinHeight={0}>
                <View style={styles.bottomSheet}>
                    <TouchableOpacity onPress={() => closeBottomSheet()} style={styles.closeIcon}>
                        <CloseIcon width={14.65} height={14.65} />
                    </TouchableOpacity>
                    <View style={styles.header}>
                        <Text style={styles.title}>Truminds</Text>
                        <Text style={[styles.create, { color: expandedItem !== null ? '#0F8D48' : '#4D4D4D' }]}>
                            + Create Subspace
                        </Text>
                    </View>
                    <View style={styles.separator} />
                    <FlatList
                        style={styles.list}
                        data={data}
                        renderItem={renderItem}
                        keyExtractor={(item) => item.label}
                    />
                </View>
            </BottomSheet>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 0,
        paddingTop: 28,
        paddingBottom: 12,
    },
    itemContainer: {
        backgroundColor: '#f2f2f2',
        padding: 10,
        borderRadius: 10,
        marginBottom: 17,
    },
    title: {
        fontSize: 24,
        fontWeight: '800',
        color: '#4D4D4D',
        fontFamily: fontFamily.theme.EXTRA_BOLD
    },
    create: {
        fontSize: 12,
        fontWeight: '600',
    },
    bottomSheet: {
        backgroundColor: 'white',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        paddingHorizontal: 5,
        paddingBottom: 10,
        marginTop: -20,
    },
    separator: {
        height: 1,
        backgroundColor: '#ddd',
        marginVertical: 10,
    },
    list: {
        marginTop: 10,
    },
    listItem: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingVertical: 10,
    },
    labelContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingBottom: 3,
        paddingTop: 3,
    },
    label: {
        fontSize: 16,
        fontWeight: '600',
        color: '#4D4D4D',
    },
    arrowIcon: {
        marginLeft: 10,
        color: '#000000',
    },
    closeIcon: {
        flex: 1,
        alignItems: 'flex-end',
    },
    rowContainer: {
        paddingHorizontal: 4,
        paddingVertical: 10,
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    rowLabel: {
        fontSize: 12,
        fontWeight: '500',
        color: '#4D4D4D',
    },
    rowArrowIcon: {
        marginLeft: 10,
        color: '#000000',
    },
});

export default SpaceBottomSheet;

我尝试在平面列表中添加诸如 nestedScrollEnabled={true}, onScroll={() => { }} 之类的道具。什么都没用