React Native で gorhom ボトムフォームの影を表示します。

Question

私は gorhom/react-native-bottom-sheet ライブラリを使用しています。ユーザーが下部フォームを上下にスライドしたときにシャドウ ボックスを表示したいと考えています。これを達成するにはどうすればよいでしょうか?出来ますか？現在、isOpen時に表示するように設定していますが、スワイプ時に表示したいと考えています。また、isPressedがtrueのときにシャドウボックスを表示するためにTouchableコンポーネントでラップしようとしましたが、下部フォームを移動するときに機能しませんでした。

デフォルト関数 BottomSheet() をエクスポート {
        const [isPressed, setIsPressed] = useState(false);
        const { t } = useTranslation();
        const [isOpen, setIsOpen] = useState(false);

    constbottomSheetModalRef = useRef(null);

    const snapPoints = ["50%"];

    関数 handlePresentModal() {
        BottomSheetModalRef.current?.present();
        setTimeout(() => {
            setIsOpen(true);
        }, 100);
    }
    戻る （
        <>
            <Button title="Present Modal" onPress={handlePresentModal} />
            <BottomSheetModalProvider>
                <StatusBar style="auto" />
                <BottomSheetモーダル
                    ref={bottomSheetModalRef}
                    インデックス={0}
                    スナップポイント={スナップポイント}
                    handleComponent={カスタムハンドラー}
                    onDismiss={() => setIsOpen(false)}
                >
                    <スペーサーサイズ={30} />
                    <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
                   // ここに内容が入ります
                    </BottomSheetScrollView>
                </BottomSheetModal>
            </BottomSheetModalProvider>
            {isOpen && <ShadowBox />}
        </>
    );
}

const スタイル = StyleSheet.create({
    コンテンツコンテナ: {
        パディング水平: 16、
        パディング下: 100、
    }、
});

Answer 1

はい、可能です。コンポーネントにシャドウ効果を追加するには、このライブラリを使用する必要があります。

ライブラリについてはこのリンクをクリックしてください

サポートが必要な場合は、お知らせください。