Exemple de code pour le composant de bouton flottant React Native

Cet article présente principalement l'exemple de code du composant de bouton flottant React Native. L'article présente l'exemple de code de manière très détaillée. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous. Les amis qui en ont besoin peuvent y jeter un œil ci-dessous. .

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 d'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(&#39;你点了我！&#39;)}}
   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 , par défaut Pour 56

2. actif : 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 : événement de clic

7. onLongPress : événement de pression longue

8. buttonText : titre du bouton

9. Orientation verticale : direction du bouton contextuel, vers le haut ou vers le bas

10. renderIcon : vous pouvez personnaliser le style d'affichage du bouton, la valeur par défaut est un signe plus

ActionButton.Item

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

2. titre : bouton titre

3. buttonColor : couleur du bouton

4. onPress : événement de clic

Ce qui précède est ce que j'ai compilé pour tout le monde. J’espère qu’il sera utile à tout le monde à l’avenir.

Articles associés :

Analyse et solutions aux raisons pour lesquelles les données obtenues par Ajax ne sont pas affichées dans les echarts

Utilisation L'objet encapsule la méthode d'appels répétés ajax

Implémentation d'une requête inter-domaines ajax basée sur iframe pour obtenir des données ajax dans la page Web

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!