React Native - Botones

En este capítulo, le mostraremos los componentes que se pueden tocar en react Native. Los llamamos 'tocables' porque ofrecen animaciones integradas y podemos usar elonPress prop para el manejo del evento táctil.

Facebook ofrece el Buttoncomponente, que se puede utilizar como botón genérico. Considere el siguiente ejemplo para entender lo mismo.

App.js

import React, { Component } from 'react'
import { Button } from 'react-native'

const App = () => {
   const handlePress = () => false
   return (
      <Button
         onPress = {handlePress}
         title = "Red button!"
         color = "red"
      />
   )
}
export default App

Si el valor predeterminado Button componente no se adapta a sus necesidades, puede utilizar uno de los siguientes componentes en su lugar.

Opacidad táctil

Este elemento cambiará la opacidad de un elemento cuando se toca.

App.js

import React from 'react'
import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'

const App = () => {
   return (
      <View style = {styles.container}>
         <TouchableOpacity>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableOpacity>
      </View>
   )
}
export default App

const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'red'
   }
})

Resaltado táctil

Cuando un usuario presiona el elemento, se oscurecerá y se mostrará el color subyacente.

App.js

import React from 'react'
import { View, TouchableHighlight, Text, StyleSheet } from 'react-native'

const App = (props) => {
   return (
      <View style = {styles.container}>
         <TouchableHighlight>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableHighlight>
      </View>
   )
}
export default App

const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'red'
   }
})

Comentarios nativos que se pueden tocar

Esto simulará la animación de tinta cuando se presione el elemento.

App.js

import React from 'react'
import { View, TouchableNativeFeedback, Text, StyleSheet } from 'react-native'

const Home = (props) => {
   return (
      <View style = {styles.container}>
         <TouchableNativeFeedback>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableNativeFeedback>
      </View>
   )
}
export default Home

const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'red'
   }
})

Tocable sin comentarios

Esto debe usarse cuando desee manejar el evento táctil sin ninguna animación. Por lo general, este componente no se usa mucho.

<TouchableWithoutFeedback>
   <Text>
      Button
   </Text>
</TouchableWithoutFeedback>