Saltar al contenido

botón de acción flotante en react native

Solución:

Ajuste su botón con la parte inferior, izquierda, derecha, superior y proporcione una posición absoluta al botón.

Este es mi código que solía hacer un botón flotante

width: 60,  
height: 60,   
borderRadius: 30,            
backgroundColor: '#ee6e73',                                    
position: 'absolute',                                          
bottom: 10,                                                    
right: 10, 

<TouchableOpacity
   style={{
       borderWidth:1,
       borderColor:'rgba(0,0,0,0.2)',
       alignItems:'center',
       justifyContent:'center',
       width:70,
       position: 'absolute',                                          
       bottom: 10,                                                    
       right: 10,
       height:70,
       backgroundColor:'#fff',
       borderRadius:100,
     }}
 >
   <Icon name="plus"  size={30} color="#01a699" />
  </TouchableOpacity>

Instalar paquetes de iconos: https://github.com/oblador/react-native-vector-icons

npm install react-native-vector-icons –save

enlace nativo de reacción

Echa un vistazo a este componente, creo que hace exactamente lo que estás buscando: https://github.com/mastermoo/react-native-action-button

¡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 *