Estoy trabajando en un proyecto nativo de reacción. Quiero proporcionar sombra para ver. Pero se estaba extendiendo así.

Pero lo que quiero es:

Obtuve la respuesta de que necesito agregar un color de fondo aquí: https://taketo.site/solved Y eso realmente resuelve mi problema, pero solo cuando agrego el color de fondo de la hoja de estilo. Pero mi problema es que quiero obtener el color de fondo de los accesorios, ya que cada vez que se representa la vista, no tendrá el mismo color de fondo, sería diferente. Pero cuando trato de proporcionar color de fondo de los accesorios, nuevamente da sombra como en la primera imagen. Aquí está mi código:

archivo componente:

 import React from 'react'; import { View } from 'react-native'; import { styles } from './styles'; class ShadowCard extends React.Component { constructor(props) { super(props); } render() { return ( <View style={[ styles.card, { width: this.props.width, height: this.props.height, backgroundColor: this.props.backgroundColor, }, ]}> {this.props.children} </View> ); } } export default ShadowCard;

archivo de hoja de estilo:

 import { StyleSheet } from 'react-native'; export const styles = StyleSheet.create({ card: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.5, shadowRadius: 2, elevation: 10, borderRadius: 12, margin: 12, }, });

Entonces, ¿qué debo hacer para poder tomar el color de fondo de los accesorios y la sombra se muestra como en la segunda imagen?