在React Native中為gorhom底部表單顯示陰影。

Question

我正在使用gorhom/react-native-bottom-sheet函式庫。我想在使用者向上或向下滑動底部表單時顯示陰影框。如何實現這一點？是否可能？目前我已經設定在isOpen時顯示，但我希望在滑動時顯示。我還嘗試將其包裝在Touchable元件中，當isPressed為true時顯示陰影框，但在移動底部表單時它並沒有起作用。

export default function 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);
    }
    return (
        <>
            <Button title="Present Modal" onPress={handlePresentModal} />
            <BottomSheetModalProvider>
                <StatusBar style="auto" />
                <BottomSheetModal
                    ref={bottomSheetModalRef}
                    index={0}
                    snapPoints={snapPoints}
                    handleComponent={CustomHandler}
                    onDismiss={() => setIsOpen(false)}
                >
                    <Spacer size={30} />
                    <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
                   //Content here
                    </BottomSheetScrollView>
                </BottomSheetModal>
            </BottomSheetModalProvider>
            {isOpen && <ShadowBox />}
        </>
    );
}

const styles = StyleSheet.create({
    contentContainer: {
        paddingHorizo​​ntal: 16,
        paddingBottom: 100,
    },
});

Answer 1

是的，這是可能的。你需要使用這個函式庫來為任何元件添加陰影效果。

Click this link for library

#

如果有任何需要幫助的地方，請告訴我！