tutoriel graphique sur le composant de bouton flottant natif React

Cette fois, je vais vous apporter un tutoriel graphique sur le groupe de boutons flottants natifs de réaction Quelles sont les précautions lors de l'utilisation du composant de bouton flottant natif de réaction. Ce qui suit est un exemple pratique. Dans ce cas, jetons un coup d'oeil ensemble.

Composant de bouton flottant React Native : react-native-action-button, composant JS pur, prend en charge les doubles plates-formes Android et IOS, prend en charge la configuration des sous-boutons et prend en charge les positions, styles et icônes personnalisés.

Rendu

Méthode d'installation

npm i react-native-action-button --save
react-native link react-native-vector-icons

Étant donné que le composant icône React-Native-Vector-Icones est utilisé, un lien doit être établi. Si vous avez déjà utilisé des icônes vectorielles réactives dans votre projet, cette étape n'est pas obligatoire.

Exemple de code

<View style={styles.container}>
  <Text style={styles.welcome}>
   悬浮按钮组件示例
  </Text>
  <ActionButton buttonColor="rgba(231,76,60,1)" position=&#39;left&#39; verticalOrientation=&#39;up&#39;>
   <ActionButton.Item buttonColor=&#39;#9b59b6&#39; title="New Task" onPress={() => console.log("notes tapped!")}>
   <Icon name="ios-create-outline" style={styles.actionButtonIcon} />
   </ActionButton.Item>
   <ActionButton.Item buttonColor=&#39;#3498db&#39; title="Notifications" onPress={() => {}}>
   <Icon name="ios-notifications-off" style={styles.actionButtonIcon} />
   </ActionButton.Item>
   <ActionButton.Item buttonColor=&#39;#1abc9c&#39; onPress={() => {}}>
   <Icon name="ios-done-all-outline" style={styles.actionButtonIcon} />
   </ActionButton.Item>
  </ActionButton>
  <ActionButton
   buttonColor="rgba(231,76,60,1)"
   onPress={() => { alert('你点了我！')}}
   renderIcon={() => (<View style={styles.actionButtonView}><Icon name="ios-create-outline" style={styles.actionButtonIcon} />
   <Text style={styles.actionButtonText}>新增</Text>
   </View>)}
  />
  </View>

Description du paramètre principal

ActionButton

1. size : La taille du bouton, la valeur par défaut est 56

2. active : Indique s'il faut afficher le bouton

3. position : la position du bouton, qui peut être gauche centre droite

4. offsetX : position décalée sur l'axe X

5. offsetY : position décalée sur l'axe Y

6. onPress : cliquez sur événement

7. onLongPress : événement d'appui long

8. buttonText : Titre du bouton

9. verticalOrientation : La direction du bouton pop-up, vers le haut ou vers le bas

10. renderIcon : Vous pouvez personnaliser le style d'affichage des boutons. La valeur par défaut est un signe plus

ActionButton.Item

.

1. taille : bouton La taille, la valeur par défaut est 56

2. titre : titre du bouton

3. boutonCouleur : bouton couleur

4. onPress : événement de clic

Exemple complet

Complet code : GitHub - forrest23/ReactNativeComponents : React Native Components Collection

Cet exemple de code se trouve dans le dossier Component10.

Adresse du composant

GitHub - mastermoo/react-native-action-button : composant de bouton multi-action personnalisable pour React-Native

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation du remplacement du module à chaud du webpack

Barre de défilement de la page d'exploration JS

Explication détaillée des trois types de $() dans jQuery

Résumé de l'algorithme de tri JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!