javascript - must - react native enclosing tag

¿Cómo renderizo una sombra?

Question

¿Cómo renderizo una sombra en una vista? He probado muchas combinaciones de shadowColor, shadowOffset, shadowOpacity y shadowRadius, que parecen no hacer nada. Estoy seguro de que el estilo se aplica correctamente, ya que otros atributos que he establecido funcionan.

Answer 1

Parece ser un error en React native que shadowOpacity está configurado para escribir CGFloat lugar de float según CALayer doc . use el simulador de iPhone 5 antes de que se solucione. ( CGFloat es float en dispositivos más antiguos).

El problema de React Native que está rastreando esto es:

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

Answer 2

Tienes que dar apoyo de elevación para Ver

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

los estilos se pueden agregar así:

 const styles = StyleSheet.create({

     container:{
        padding:20,
        backgroundColor:''#d9d9d9'',
        shadowColor: "#000000",
        shadowOpacity: 0.8,
        shadowRadius: 2,
        shadowOffset: {
          height: 1,
          width: 1
        }
       },
   })

Answer 3

Todo sobre los márgenes

esto funciona en Android, pero no lo probé en 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

Answer 4

Use la elevación para implementar sombras en RN Android. Prop de elevación agregado # 27

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

Answer 5

por componente con estilo

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;     
`

o por estilos

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,
  }
})

Answer 6

Estoy usando React-Native 0.40 y el siguiente código me funciona tanto en iOS como en Android.

(Solo para Android) Establece la elevación de una vista, utilizando la API de elevación subyacente de Android. Esto agrega una sombra paralela al elemento y afecta el orden z para las vistas superpuestas. Solo es compatible con Android 5.0+, no tiene efecto en versiones anteriores.

 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
  }
})

Probado en iPhone.

Editar

Comentario de @ James. Gracias.

Nota: Para aquellos en Android, el backgroundColor es crítico . Estaba usando Ver como contenedor para otro elemento y no pude obtener una sombra hasta que especifiqué un color de fondo.

Answer 7

    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''
},

Use marginBottom: 10

Answer 8

  panel: {
    // ios
    backgroundColor: ''#03A9F4'',
    alignItems: ''center'', 
    shadowOffset: {width: 0, height: 13}, 
    shadowOpacity: 0.3,
    shadowRadius: 6,

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

o puedes usar react-native-shadow para android