web-dev-qa-db-fra.com

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

Salut, j'essaie de créer une ombre pour mon fab, mais mes tentatives ont échoué jusqu'à présent, j'ai essayé de définir des accessoires d'ombre, mais c'est pour iOS uniquement, alors j'ai essayé de jouer avec la propriété d'altitude, mais cela ne semble pas correct.

Voici ce que j'ai essayé

<View style={{width: 56, height: 56, elevation: 2, borderRadius: 28, marginBottom: 3, backgroundColor: 'rgba(231,76,60,1)'}}></View>

Ce que j'ai besoin de réaliser

 enter image description here

react-native
40
Ibrahim Ahmed

METTRE &AGRAVE; JOUR

L'ajout de la propriété css elevation: 1 rend l'ombre dans Android sans installer de bibliothèque tierce. Voir d'autres réponses.

-

Une façon d'obtenir des ombres pour Android consiste à installer react-native-shadow

Exemple du readme:

import React, {Component} from 'react' import {
    StyleSheet,
    View,
    Text,
    ScrollView,
    Image,
    TouchableHighlight } from 'react-native'

import {BoxShadow} from 'react-native-shadow'

export default class VideoCell 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 (
            <BoxShadow setting={shadowOpt}>
                <TouchableHighlight style={{
                    position:"relative",
                    width: 160,
                    height: 170,
                    backgroundColor: "#fff",
                    borderRadius:3,
                    // marginVertical:5,
                    overflow:"hidden"}}>
                    …………………………
                </TouchableHighlight>
            </BoxShadow>
        )
    } 
}
69
FuzzyTree

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

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

(Android uniquement) Définit l’altitude d’une vue, à l’aide d’Android API d'élévation sous-jacente. Cela ajoute une ombre portée à l'élément et affecte l'ordre z pour les vues qui se chevauchent. Uniquement pris en charge sur Android 5.0 +, n'a aucun effet sur les versions précédentes.

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

<View style={{ elevation: 2 }}>
    {children}
</View>

Plus l'altitude est élevée, plus l'ombre est grande. J'espère que cela t'aides!

67
Ajackster

Tu peux essayer 

//ios    
shadowOpacity: 0.3,
shadowRadius: 3,
shadowOffset: {
    height: 0,
    width: 0
},
//Android
elevation: 1
33
lam luu

Il suffit d'utiliser la propriété 'altitude' pour obtenir l'ombre dans Android quelque chose comme ci-dessous

const Header = () => {
    // const { textStyle, viewStyle } = styles;
    return (
      <View style={styles.viewStyle}>    
        <Text style={styles.textStyle}>Albums</Text>
      </View>
    )
}


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

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

par exemple :

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

    //Its for IOS
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,

    // its for Android 
    elevation: 5,
    position:'relative',

},
4
Aras

Ce qui suit vous aidera à donner à chaque Platform le style que vous souhaitez: 

import { Text, View, Platform } from 'react-native';

......
<View style={styles.viewClass}></View>
......


const styles = {
viewClass: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 60,
    ...Platform.select({
        ios: {
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.2,
        },
        Android: {
            elevation: 1

        },
      }),
}
};
3
Mohammed Alawneh

De plus, j'aimerais ajouter que si l'on essaie d'appliquer une ombre dans un composant TouchableHighlight dans lequel l'enfant a borderRadius, l'élément parent (TouchableHighlight) a également besoin du rayon défini pour pouvoir travailler en hauteur sur Android.

2
Andrei Vedovato

J'ai eu le même problème ombre/élévation ne montrant pas sur Android avec élévation: 2. Ensuite, j'ai remarqué que l'élément de vue est la largeur d'imbécile, j'ai donc ajouté margin: 2 à l'élément de vue et l'altitude est correctement apparue.

Style:

    margin: 2,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 2

Android:  enter image description here

iOS:  enter image description here

0
Kristijan Tomić

Définissez elevation: 3 et vous devriez voir l'ombre en bas du composant sans bibliothèque tierce. Au moins dans la RN 0.57.4

0
C-lio Garcia

J'ai implémenté CardView pour réagir en natif avec élévation, qui prend en charge Android (toutes les versions) et iOS. Faites-moi savoir si cela vous aide ou non. https://github.com/Kishanjvaghela/react-native-cardview

import CardView from 'react-native-cardview'
<CardView
          cardElevation={2}
          cardMaxElevation={2}
          cornerRadius={5}>
          <Text>
              Elevation 0
          </Text>
</CardView>

 enter image description here

0
Kishan Vaghela

altitude toujours pas de travail dans Expo v30 && React-native v0.55.4. J'ai essayé toutes les réponses ici. 

Aussi, n'essayez pas react-native-shadow - leur rendu des ombres est terrible. Donc, je continue la recherche. 

0
Niklavr

En bref, vous ne pouvez pas le faire sous Android, car si vous ne voyez que la documentation concernant Shadow Support IOSvoir doc

La meilleure option consiste à installer une tierce partie react-native-shadow

0
Muhammad Al Faris