0
213
Vistas¿Cómo renderizo una sombra?
¿Cómo renderizo una sombra en una View ? Probé 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 configuré funcionan.
3 Respuestas
Responde la pregunta0
Estoy usando React-Native 0.40 y el código siguiente me funciona tanto en IOS como en Android.
(Solo Android) Establece la elevación de una vista mediante 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 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 color de fondo es crítico . Estaba usando View como contenedor para otro elemento y no pude obtener una sombra hasta que especifiqué un color de fondo.
0
Use la elevación para implementar sombras en RN Android. Accesorio de elevación agregado # 27
<View elevation={5}> </View>
0
Parece ser un error en React native que shadowOpacity está configurado para escribir CGFloat en lugar de float de acuerdo con 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: