検索

ホームページ  >  に質問  >  本文

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

<p>私は gorhom/react-native-bottom-sheet ライブラリを使用しています。ユーザーが下部フォームを上下にスライドしたときにシャドウ ボックスを表示したいと考えています。これを達成するにはどうすればよいでしょうか?出来ますか?現在、isOpen時に表示するように設定していますが、スワイプ時に表示したいと考えています。また、isPressedがtrueのときにシャドウボックスを表示するためにTouchableコンポーネントでラップしようとしましたが、下部フォームを移動するときに機能しませんでした。 </p> <pre class="brush:php;toolbar:false;">デフォルト関数 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、 }、 });</pre> <p><br /></p>
P粉148434742P粉148434742483日前525

全員に返信(1)返信します

  • P粉311089279

    P粉3110892792023-07-28 20:51:00

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

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

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

    返事
    0
  • キャンセル返事