React Native - Pulsanti

In questo capitolo, ti mostreremo i componenti toccabili in React Native. Li chiamiamo "tangibili" perché offrono animazioni integrate e possiamo usare l'estensioneonPress puntello per la gestione dell'evento touch.

Facebook offre l'estensione Buttoncomponente, che può essere utilizzato come pulsante generico. Considera il seguente esempio per capire lo stesso.

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

Se l'impostazione predefinita Button componente non si adatta alle tue esigenze, puoi invece utilizzare uno dei seguenti componenti.

Opacità tangibile

Questo elemento cambierà l'opacità di un elemento quando viene toccato.

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'
   }
})

Evidenziazione tangibile

Quando un utente preme l'elemento, diventerà più scuro e verrà visualizzato il colore sottostante.

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'
   }
})

Feedback nativo tangibile

Questo simulerà l'animazione dell'input penna quando l'elemento viene premuto.

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'
   }
})

Toccabile senza feedback

Questo dovrebbe essere usato quando vuoi gestire l'evento tocco senza alcuna animazione. Di solito, questo componente non è usato molto.

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