Comment définir des ombres dans React Native pour Android?

Question

Bonjour, je essaie de définir une ombre pour mon fab mais mes tentatives ont échoué jusqu'à présent j'ai essayé de définir des propriétés shadow mais c'est pour ios seulement donc j'ai essayé de jouer avec la propriété elevation mais ça ne semble pas correct.

Voici ce que j'ai essayé

Ce que j'ai besoin de réaliser

Answer 1

Ajouter la propriété CSS elevation: 1 rend l'ombre sur Android sans installer de bibliothèque tierce.

elevation est une propriété de style disponible uniquement sur les éléments View d'Android.

Voir : Documentation de React Native pour la propriété de style elevation

---

Si vous êtes ouvert aux logiciels tiers, une autre façon d'obtenir des ombres pour Android est d'installer react-native-shadow.

Exemple (adapté du readme):

import React, { Component } from "react";
import { TouchableHighlight } from "react-native";

import { BoxShadow } from "react-native-shadow";

export default class ShadowButton extends Component {
  render() {
    const shadowOpt = {
      width: 160,
      height: 170,
      color: "#000",
      border: 2,
      radius: 3,
      opacity: 0.2,
      x: 0,
      y: 3,
      style: { marginVertical: 5 }
    };

    return (

          ...

    );
  }
}

Answer 2

Une autre solution sans utiliser de bibliothèque tierce est d'utiliser elevation.

Extrait de la documentation de react-native. https://facebook.github.io/react-native/docs/view.html

(Android seulement) Définit l'élévation d'une vue en utilisant l'API d'élévation sous-jacente d'Android. Cela ajoute une ombre portée à l'élément et affecte l'ordre Z pour les vues superposées. Pris en charge uniquement sur Android 5.0+, n'a aucun effet sur les versions antérieures.

elevation ira dans la propriété style et peut être implémenté comme ceci.

    {children}

Plus l'élévation est élevée, plus l'ombre est grande. J'espère que cela vous aide!

Answer 3

Vous pouvez essayer

//ios    
shadowOpacity: 0.3,
shadowRadius: 3,
shadowOffset: {
    height: 0,
    width: 0
},
//android
elevation: 1

Answer 4

Pour un écran Android, vous pouvez utiliser cette propriété elevation.

par exemple :

 HeaderView:{
    backgroundColor:'#F8F8F8',
    justifyContent:'center',
    alignItems:'center',
    height:60,
    paddingTop:15,

    //C'est pour IOS
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,

    // c'est pour Android
    elevation: 5,
    position:'relative',

},

Answer 5

Il suffit d'utiliser la propriété 'elevation' pour obtenir une ombre sur Android. quelque chose comme ci-dessous

const Header = () => {
    // const { textStyle, viewStyle } = styles;
    return (

        Albums

    )
}

const styles = {
    viewStyle:{
        backgroundColor:'#f8f8f8',
        justifyContext:'center',
        alignItems: 'center',
        padding:16,
        elevation: 2
    }
}