Saltar al contenido

¿Cómo desvanecer el borde de una vista en react native?

Solución:

En iOS, puede utilizar el MaskedViewIOS componente para crear una máscara alfa transparente para el efecto de desvanecimiento.

Para el degradado de desvanecimiento en sí, puede usar algo como react-native-linear-gradient (que también está integrado en Expo) o una imagen semitransparente (los píxeles negros mostrarán el contenido, los píxeles transparentes bloquearán el contenido enmascarado).

<MaskedViewIOS 
  maskElement={
    <LinearGradient colors={['black', 'transparent']} />
  }
>
  <YourContent />
</MaskedViewIOS>

Aquí hay un ejemplo de Snack.

Desafortunadamente, MaskedView aún no está implementado en Android. No conozco una forma sencilla de implementar esto, pero estaría feliz de que se demuestre que estoy equivocado.

Puedes envolver tu vista en algo como

<BackgroundContainer>
  <LinearGradient>
    <UserList>
  </LinearGradient>
</BackgroundContainer>

de https://github.com/react-native-community/react-native-linear-gradient

luego use canales alfa (rgba ()) para obtener el efecto de transparencia que está buscando.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *