Tunjukkan bayang untuk bentuk bawah gorhom dalam React Native.

Question

Saya menggunakan pustaka gorhom/react-native-bottom-sheet. Saya ingin menunjukkan kotak bayang apabila pengguna meluncur ke atas atau ke bawah borang bawah. Bagaimana untuk mencapai ini? Adakah mungkin? Pada masa ini saya telah menetapkannya untuk ditunjukkan apabila isOpen, tetapi saya mahu ia ditunjukkan apabila meleret. Saya juga cuba membungkusnya dalam komponen Boleh Disentuh untuk menunjukkan kotak bayang apabila isPressed adalah benar, tetapi ia tidak berfungsi apabila mengalihkan borang bawah.

eksport fungsi lalai BottomSheet() {
        const [isPressed, setIsPressed] = useState(false);
        const { t } = useTranslation();
        const [isOpen, setIsOpen] = useState(false);

    const bottomSheetModalRef = useRef(null);

    const snapPoints = ["50%"];

    function handlePresentModal() {
        bottomSheetModalRef.current?.present();
        setTimeout(() => {
            setIsOpen(true);
        }, 100);
    }
    kembali (
        <>
            <Button title="Present Modal" onPress={handlePresentModal} />
            <BottomSheetModalProvider>
                <StatusBar style="auto" />
                <BottomSheetModal
                    ref={bottomSheetModalRef}
                    indeks={0}
                    snapPoints={snapPoints}
                    handleComponent={CustomHandler}
                    onDismiss={() =>
                >
                    <Saiz spacer={30} />
                    <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
                   //Kandungan di sini
                    </BottomSheetScrollView>
                </BottomSheetModal>
            </BottomSheetModalProvider>
            {isOpen && <ShadowBox />}
        </>
    );
}

gaya const = StyleSheet.create({
    contentContainer: {
        paddingMendatar: 16,
        paddingBawah: 100,
    },
});

Answer 1

Ya, boleh. Anda perlu menggunakan perpustakaan ini untuk menambah kesan bayang pada mana-mana komponen.

Klik pautan ini untuk perpustakaan

Jika anda memerlukan sebarang bantuan, sila beritahu saya!