Schatten für Gorhom-Unterseite in React Native anzeigen.
P粉148434742
2023-07-27 23:12:57
<p>Ich verwende die Bibliothek gorhom/react-native-bottom-sheet. Ich möchte das Schattenfeld anzeigen, wenn der Benutzer das untere Formular nach oben oder unten bewegt. Wie erreicht man das? Ist es möglich? Derzeit ist es so eingestellt, dass es angezeigt wird, wenn „isOpen“ ist, aber ich möchte, dass es beim Wischen angezeigt wird. Ich habe auch versucht, es in eine Touchable-Komponente zu packen, um die Schattenbox anzuzeigen, wenn isPressed wahr ist, aber beim Verschieben des unteren Formulars hat es nicht funktioniert. </p>
<pre class="brush:php;toolbar:false;">Standardfunktion exportieren BottomSheet() {
const [isPressed, setIsPressed] = useState(false);
const { t } = useTranslation();
const [isOpen, setIsOpen] = useState(false);
const bottomSheetModalRef = useRef(null);
const snapPoints = ["50%"];
Funktion handlePresentModal() {
bottomSheetModalRef.current?.present();
setTimeout(() => {
setIsOpen(true);
}, 100);
}
zurückkehren (
<>
<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}>
//Inhalt hier
</BottomSheetScrollView>
</BottomSheetModal>
</BottomSheetModalProvider>
{isOpen && <ShadowBox />}
</>
);
}
const Styles = StyleSheet.create({
contentContainer: {
PolsterungHorizontal: 16,
Polsterung unten: 100,
},
});</pre>
<p><br /></p>
是的,这是可能的。你需要使用这个库来为任何组件添加阴影效果。
Click this link for library
如果有任何需要帮助的地方,请告诉我!