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>