Création d'une interface utilisateur avec l'ombre de la boîte dans réagit natif

Question

J'essaie de créer une interface utilisateur dans réagit natif, l'interface utilisateur contient une boîte avec une ombre externe. en utilisant l'image que j'ai faite, mais existe-t-il un moyen approprié de le faire?

Joindre l'image

Answer 1

Vous devrez utiliser différents accessoires de style pour iOS et Android.

Android

C'est très simple pour Android, il suffit d'utiliser le prop de style elevation (Voir docs ). Un exemple: 

boxWithShadow: {
    elevation: 5
}

iOS

Dans iOS, vous avez plus de flexibilité, utilisez les accessoires Shadow (voir docs ). Un exemple: 

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 1,  
}

Résumé

En résumé, pour obtenir l'ombre de la boîte pour les deux plates-formes, utilisez les deux ensembles d'accessoires de style: 

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 2,  
    elevation: 5
}

Attention: _ ​​N'utilisez pas overflow: 'hidden';, dans iOS, toutes les ombres disparaissent avec cette propriété.

Answer 2

Hé, regarde, c'est fait maintenant!

const styles = StyleSheet.create({
    shadow: {  
        borderColor:'yourchoice', // if you need 
        borderWidth:1,
        overflow: 'hidden',
        shadowColor: 'yourchoice',
        shadowRadius: 10,
        shadowOpacity: 1,
    }
});

Gardez à l'esprit que les accessoires de l'ombre ne sont disponibles que pour IOS.