web-dev-qa-db-fra.com

Comment puis-je rendre une ombre?

Comment rendre une ombre sur une vue? J'ai essayé de nombreuses combinaisons de shadowColor, shadowOffset, shadowOpacity et shadowRadius, qui semblent ne rien faire. Je suis sûr que le style est appliqué correctement, car les autres attributs que j'ai définis fonctionnent.

javascriptreact-native
52
user2503846

Il semble qu’il s’agit d’un bogue dans React indique que shadowOpacity est configuré pour taper CGFloat au lieu de float selon CALayer doc . utilisez le simulateur iPhone 5 avant qu'il ne soit réparé (CGFloat est float dans les appareils plus anciens.)

Le problème natif React) qui en fait le suivi est:

https://github.com/facebook/react-native/issues/449

13
wangii

J'utilise React-Native 0.40 et le code ci-dessous fonctionne pour moi à la fois sur IOS et Android.

(Android uniquement) Définit l’altitude d’une vue, à l’aide de 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 qui se chevauchent. Uniquement pris en charge sur Android 5.0+, n'a aucun effet sur les versions précédentes.

 class MainApp extends Component {
  render() {
    return (
      <View style={styles.container}>

        <View elevation={5} style={styles.buttonContainer}>
          <Text style={styles.textStyle}>Shadow Applied</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  textStyle: {
    color: '#FFFFFF'
  },
  buttonContainer: {
    backgroundColor: '#2E9298',
    borderRadius: 10,
    padding: 10,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 5,
    shadowOpacity: 1.0
  }
})

Testé sur iPhone.

enter image description here

Edit

Commentaire de @ James. Merci.

Remarque: Pour ceux qui utilisent Android, l’arrière-plan est critique . J'utilisais View en tant que conteneur pour un autre élément et je ne pouvais pas obtenir d'ombre tant que je n'avais pas spécifié de couleur d'arrière-plan.

81
Ashok R

Utilisez l’élévation pour implémenter des ombres sur RN Android. Ajout d'élévation n ° 27

<View elevation={5}> </View>

29
Karthick Kumar
    viewStyle : {
    backgroundColor: '#F8F8F8',
    justifyContent: 'center',
    alignItems: 'center',
    height: 60,
    paddingTop: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    marginBottom: 10,
    elevation: 2,
    position: 'relative'
},

tilisez marginBottom: 1

12
Viktor Bogutskii

Vous devez donner un accessoire d'altitude à Voir

<View elevation={5} style={styles.container}>
   <Text>Hello World !</Text>
 </View>

les styles peuvent être ajoutés comme ceci:

 const styles = StyleSheet.create({

     container:{
        padding:20,
        backgroundColor:'#d9d9d9',
        shadowColor: "#000000",
        shadowOpacity: 0.8,
        shadowRadius: 2,
        shadowOffset: {
          height: 1,
          width: 1
        }
       },
   })
11
Saurabh Joshi
  panel: {
    // ios
    backgroundColor: '#03A9F4',
    alignItems: 'center', 
    shadowOffset: {width: 0, height: 13}, 
    shadowOpacity: 0.3,
    shadowRadius: 6,

    // Android (Android +5.0)
    elevation: 3,
  }

ou vous pouvez utiliser react-native-shadow pour Android

8
Umino San

Tout sur les marges

cela fonctionne dans Android, mais ne l'a pas testé dans iOS

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { View, Platform } from 'react-native'
import EStyleSheet from 'react-native-extended-stylesheet'

const styles = EStyleSheet.create({
    wrapper: {
        margin: '-1.4rem'
    },
    shadow: {
        padding: '1.4rem',
        margin: '1.4rem',
        borderRadius: 4,
        borderWidth: 0,
        borderColor: 'transparent',
        ...Platform.select({
            ios: {
                shadowColor: 'rgba(0,0,0, 0.4)',
                shadowOffset: { height: 1, width: 1 },
                shadowOpacity: 0.7,
                shadowRadius: '1.4rem'
            },
            Android: {
                elevation: '1.4rem'
            }
        })
    },
    container: {
        padding: 10,
        margin: '-1.4rem',
        borderRadius: 4,
        borderWidth: 0,
        borderColor: '#Fff',
        backgroundColor: '#fff'
    }
})

class ShadowWrapper extends PureComponent {
    static propTypes = {
        children: PropTypes.oneOfType([
            PropTypes.element,
            PropTypes.node,
            PropTypes.arrayOf(PropTypes.element)
        ]).isRequired
    }

    render () {
        return (
            View style={styles.wrapper}
                View style={styles.shadow}
                    View style={styles.container}
                        {this.props.children}
                    View
                View
            View
        )
    }
}

export default ShadowWrapper
6
Denis Zaytsev

par composant stylé

const StyledView = styled.View`
      border-width: 1;
      border-radius: 2;
      border-color: #ddd;
      border-bottom-width: 0;
      shadow-color: #000;
      shadow-offset: {width: 0, height: 2};
      shadow-opacity: 0.8;
      shadow-radius: 2;
      elevation: 1;     
`

ou par styles

const styles = StyleSheet.create({
  containerStyle: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 0,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop: 10,
  }
})
0
Naved Khan