React Native - Boutons

Dans ce chapitre, nous allons vous montrer les composants tactiles de react Native. Nous les appelons `` tactiles '' car ils offrent des animations intégrées et nous pouvons utiliser leonPress accessoire pour gérer l'événement tactile.

Facebook propose le Buttoncomposant, qui peut être utilisé comme bouton générique. Prenons l'exemple suivant pour comprendre la même chose.

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 la valeur par défaut Button ne répond pas à vos besoins, vous pouvez utiliser l'un des composants suivants à la place.

Opacité tactile

Cet élément changera l'opacité d'un élément lorsqu'il est touché.

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

Surlignage tactile

Lorsqu'un utilisateur appuie sur l'élément, il deviendra plus sombre et la couleur sous-jacente apparaîtra.

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

Commentaires natifs touchables

Cela simulera une animation d'encre lorsque l'élément est pressé.

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

Touchable sans rétroaction

Cela doit être utilisé lorsque vous souhaitez gérer l'événement tactile sans aucune animation. En général, ce composant n'est pas beaucoup utilisé.

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