web-dev-qa-db-fra.com

L'ombre native de React n'apparaît pas

J'essaie d'obtenir une ombre sous mes vues, et d'après ce que j'ai trouvé en ligne, cela devrait être assez simple:

    shadowOffset: { width: 10, height: 10 },
    shadowColor: 'black',
    shadowOpacity: 1.0,

mais le problème est que l'ombre n'apparaît pas du tout.

Voici mes composants

      <View style={styles.shadow}>
        <View style={styles.box} >
          <View style={styles.ListComponent}>
            <Text style={styles.itemText}>Livestream</Text>
          </View>
        </View>
      </View>

et dans ma feuille de style:

const styles = StyleSheet.create({
   shadow: {
   shadowOffset: { width: 10, height: 10 },
   shadowColor: 'black',
   shadowOpacity: 1.0
},

Y a-t-il une raison à cela ou y a-t-il quelque chose que j'ai manqué?

react-nativeshadow
17
smuvv

L'ombre fonctionne-t-elle sur les E/S? Android et IOS fonctionne ≠ dans React-Native. Pour Android, il fonctionne avec élévation .

const styles = StyleSheet.create({
shadow: {
  shadowOffset: { width: 10, height: 10 },
  shadowColor: 'black',
  shadowOpacity: 1,
  elevation: 3,
  // background color must be set
  backgroundColor : "#0000" // invisible color
}

Sinon, essayez de définir une couleur d'arrière-plan pour votre composant d'ombre :)

41
Thomas Bouder

Pour iOS, augmentez le zIndex de votre <View> Externe

const styles = StyleSheet.create({  
 shadow: {  
  shadowOffset: { width: 10, height: 10 },  
  shadowColor: 'black',  
  shadowOpacity: 1,  
  elevation: 3,  
  zIndex:999,  
}
8
GollyJer

Moi aussi, je voulais avoir une ombre sous ma vue dans mon Android. L'astuce que j'ai trouvée était donc:

Pour IOS: 

const styles = StyleSheet.create({
    shadow: {
      shadowOffset: { width: 0, height: 2 },
      shadowColor: '#000',
      shadowOpacity: 0.2
    }
});

Et pour Android: 

const styles = StyleSheet.create({
    shadow: {
        elevation: 5
    }
});

Si vous travaillez sur des éléments d'interface utilisateur, je vous suggère de consulter NativeBase site. Ils ont rendu la vie facile en ce qui concerne le style.

2
talhasaleem09