Création d'une INTERFACE utilisateur avec boîte d'ombre à réagir natif

Suis en train de créer une INTERFACE utilisateur de réagir natif, l'INTERFACE utilisateur contient une zone externe de l'ombre. l'utilisation de l'image je l'ai fait, mais est-il une bonne façon de le faire?

Fixation de l'image

InformationsquelleAutor Rahul v Ramesh | 2017-08-31
  1. 18

    Vous devrez utiliser un style différent des accessoires de jeu pour iOS et Android.

    Android

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

    boxWithShadow: {
    elevation: 5
}

    iOS

    Dans iOS vous avez plus de souplesse, de l'utilisation de l'Ombre des accessoires (Voir docs). Un exemple: 

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

    Résumé

    En résumé, pour obtenir de zone d'ombre pour les deux plates-formes, utiliser les deux ensembles de style accessoires: 

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

    À l'Attention de: Ne pas utiliser overflow: 'hidden';, dans iOS toutes les ombres disparaissent par cette propriété.

    • N'est-ce pas là une façon de personnaliser l'ombre d'accessoires dans Android?
    • Je ne pense pas que vous pouvez personnaliser en Android.
    • et l'utilisation backgroundColor: "#fff"
    InformationsquelleAutor Sarath S Menon
  2. 2

    Hé, Regardez, c'est Fait Maintenant !

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

    Garder à l'esprit de l'ombre accessoires sont disponible uniquement pour IOS.

    • L'Ombre des accessoires sont disponibles uniquement pour IOS.
    • Cette réponse travaille juste dans iOS et la overflow: 'hidden'; disparaître toutes les ombres, Donc si vous voulez voir la totalité de l'ombre omettre overflow: 'hidden';.
    InformationsquelleAutor Nitin Bagoriya