Il y a un problème avec les boutons natifs de réaction qui peuvent être difficiles à voir et à comprendre. Lorsque vous créez un bouton dans React Native, vous avez la possibilité de créer un bouton rond ou carré. Cependant, lorsque vous utilisez ces boutons dans votre application, il peut être difficile de voir lequel est rond et lequel est carré. Cela peut entraîner de la confusion et des problèmes lorsque vous essayez d'utiliser les boutons de votre application.
border
import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.container}> <TouchableOpacity style={styles.button}> <Text style={styles.text}>Click Me</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { backgroundColor:'#4ba37b', width:100, borderRadius:50, alignItems:'center', paddingTop:14 }, text:{ color:'#fff', fontSize:16 } });
Ce code est écrit en React Native et crée un bouton qui dit "Cliquez-moi". Lorsque le bouton est cliqué, une action est effectuée.
La première ligne importe les bibliothèques React et React Native.
La deuxième ligne crée un composant appelé App. Ce composant affichera un bouton.
La troisième ligne affiche le composant App. Le composant App contient un élément TouchableOpacity, qui s'affichera sous la forme d'un bouton. Le bouton a un style de styles.button, qui est défini dans la quatrième ligne. Le texte du bouton aura un style de styles.text, qui est défini dans la cinquième ligne.
Les sixième et septième lignes définissent respectivement les styles des éléments conteneur et bouton. L'élément conteneur aura JustContent et alignItems définis sur 'center', de sorte que le bouton sera centré sur l'écran. L'élément bouton aura un backgroundColor de '#4ba37b' et une largeur de 100 pixels. Il aura également borderRadius défini sur 50, de sorte qu'il apparaisse sous la forme d'un cercle plutôt que d'un rectangle. Enfin, alignItems sera défini sur 'center', de sorte que le texte qu'il contient soit centré verticalement et horizontalement.
définir les boutons dans React
Il existe différents types de boutons dans React Native :
Bouton
Saisie de texte
Radiobutton
Case à cocher
Comment donner des styles aux boutons
Il existe plusieurs façons de donner des styles aux boutons dans React Native.
Une façon consiste à utiliser le composant StyleSheet. Vous pouvez transmettre un objet de style comme second argument à la méthode create() du composant StyleSheet. L'objet de style peut contenir des propriétés de police, de couleur et de couleur d'arrière-plan.
Une autre méthode consiste à utiliser le composant Button. Vous pouvez passer un objet de style comme deuxième argument à la méthode create() du composant Button. L'objet de style peut contenir des propriétés de police, de couleur et de couleur d'arrière-plan.
