web-dev-qa-db-fra.com

Comment puis-je définir l'ombre d'élévation uniquement en bas sur React Native

J'essaie d'ajouter une ombre au bas d'une vue, mais je ne sais pas comment le faire sur Android. Avec elevation, il a également mis une ombre sur le dessus. Existe-t-il un moyen de le faire comme sur iOS?

Voici mon code:

export function makeElevation(elevation) {
const iosShadowElevation = {
    shadowOpacity: 0.0015 * elevation + 0.18,
    shadowRadius: 0.5 * elevation,
    shadowOffset: {
        height: 0.6 * elevation,
    },
};
const androidShadowElevation = {
    elevation,
};
return Platform.OS === 'ios' ? iosShadowElevation : androidShadowElevation;

}

gauche: iOS (attendu)

à droite: Android

IOS/Android

androidreact-nativereact-native-androidandroid-stylesshadow
14
tinmarfrutos

Vous pouvez utiliser overflow: 'hidden' pour obtenir le résultat souhaité sans avoir à installer de bibliothèque.
envelopper la vue dans une vue parent et définir le débordement du parent sur caché et appliquer un remplissage uniquement sur le côté où vous souhaitez que votre ombre apparaisse comme suit:

  <View style={{ overflow: 'hidden', paddingBottom: 5 }}>
    <View
      style={{
        backgroundColor: '#fff',
        width: 300,
        height: 60,
        shadowColor: '#000',
        shadowOffset: { width: 1, height: 1 },
        shadowOpacity:  0.4,
        shadowRadius: 3,
        elevation: 5,
      }} 
    />
  </View>

résultat: result

voici un composant personnalisé que vous pouvez utiliser:

import React from 'react'
import { View, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'


const SingleSidedShadowBox = ({ children, style }) => (
  <View style={[ styles.container, style ]}>
    { children }
  </View>
);

const styles = StyleSheet.create({
  container:{
    overflow: 'hidden',
    paddingBottom: 5,
  }
});

SingleSidedShadowBox.propTypes = {
  children: PropTypes.element,
  style: PropTypes.object,
};

export default SingleSidedShadowBox;

exemple:

<SingleSidedShadowBox style={{width: '90%', height: 40}}>
  <View style={{
    backgroundColor: '#fff',
    width: '100%',
    height: '100%',
    shadowColor: '#000',
    shadowOffset: { width: 1, height: 1 },
    shadowOpacity:  0.4,
    shadowRadius: 3,
    elevation: 5,
  }} />
</SingleSidedShadowBox>

vous pouvez ajuster le rembourrage en fonction de votre ombre

4
Abdelrhman Elmahdy

Malheureusement, RN ne le prend pas en charge par défaut, vérifiez le lien de coup https://ethercreative.github.io/react-native-shadow-generator/

mais vous pouvez utiliser des packages npm comme this

3
Maleking