Afficher l'ombre du formulaire inférieur de gorhom dans React Native.
P粉148434742
2023-07-27 23:12:57
<p>J'utilise la bibliothèque gorhom/react-native-bottom-sheet. Je souhaite afficher la zone d'ombre lorsque l'utilisateur fait glisser le formulaire inférieur vers le haut ou vers le bas. Comment y parvenir ? Est-il possible? Actuellement, je l'ai configuré pour afficher quand isOpen, mais je veux qu'il s'affiche lors du balayage. J'ai également essayé de l'envelopper dans un composant Touchable pour afficher la zone d'ombre lorsque isPressed est vrai, mais cela n'a pas fonctionné lors du déplacement du formulaire inférieur. </p>
<pre class="brush:php;toolbar:false;">exporter la fonction par défaut BottomSheet() {
const [isPressed, setIsPressed] = useState(false);
const {t} = useTranslation();
const [isOpen, setIsOpen] = useState(false);
const bottomSheetModalRef = useRef(null);
const snapPoints = ["50%"];
fonction handlePresentModal() {
bottomSheetModalRef.current?.present();
setTimeout(() => {
setIsOpen(true);
}, 100);
}
retour (
≪>
<Button title="Present Modal" onPress={handlePresentModal} />
<BottomSheetModalProvider>
<StatusBar style="auto" />
<BottomSheetModal
ref={bottomSheetModalRef}
indice={0}
snapPoints={snapPoints}
handleComponent={CustomHandler}
onDismiss={() => setIsOpen(false)}
>
<Taille de l'espacement={30} />
<BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
//Contenu ici
</BottomSheetScrollView>
</BottomSheetModal>
</BottomSheetModalProvider>
{isOpen &&<ShadowBox />}
≪/>
);
}
const styles = StyleSheet.create({
contenuConteneur : {
rembourrageHorizontal: 16,
rembourrageBas: 100,
},
});</pré>
<p><br /></p>
Oui, c'est possible. Vous devez utiliser cette bibliothèque pour ajouter un effet d'ombre à n'importe quel composant.
Cliquez sur ce lien pour la bibliothèque
Si vous avez besoin d'aide, n'hésitez pas à me le faire savoir !