Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispielcode für die schwebende Schaltflächenkomponente React Native

亚连
Freigeben: 2018-05-26 15:18:55
Original
1977 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode der React Native-Floating-Button-Komponente vorgestellt. Er hat einen gewissen Referenz-Lernwert für alle, die ihn beim Lernen oder Arbeiten benötigen. .

React Native Floating-Button-Komponente: React-Native-Action-Button, reine JS-Komponente, unterstützt Android- und IOS-Dual-Plattformen, unterstützt das Festlegen von Unterschaltflächen und unterstützt benutzerdefinierte Position, Stil und Symbol.

Rendering

Installationsmethode

npm i react-native-action-button --save
react-native link react-native-vector-icons
Nach dem Login kopieren

Da die Symbolkomponente „react-native-vector-icons“ verwendet wird, muss ein Link erstellt werden. Wenn Sie in Ihrem Projekt bereits React-Native-Vector-Icons verwendet haben, ist dieser Schritt nicht erforderlich.

Beispielcode

<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>
Nach dem Login kopieren

Hauptparameter Beschreibung

ActionButton

  1. Größe: Die Größe der Schaltfläche, die Standard ist 56

  2. aktiv: ob die Schaltfläche angezeigt werden soll

  3. Position: die Position der Schaltfläche, die links in der Mitte rechts sein kann

  4. OffsetX: Offset-Position auf der X-Achse

  5. OffsetY: Offset-Position auf der Y-Achse

  6. onPress: Klickereignis

  7. onLongPress: Langdruckereignis

  8. buttonText: Schaltflächentitel

  9. vertikale Ausrichtung: die Richtung der Popup-Schaltfläche, nach oben oder unten

  10. renderIcon: Sie können den Stil der Schaltflächenanzeige anpassen. Der Standardwert ist ein Pluszeichen

ActionButton.Item

  1. Größe: Die Größe der Schaltfläche, der Standardwert ist 56

  2. Titel : Schaltflächentitel

  3. buttonColor: Schaltflächenfarbe

  4. onPress: Klickereignis

Das Obige ist Was ich für alle zusammengestellt habe, hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Analyse und Lösungen für die Gründe, warum die von Ajax erhaltenen Daten nicht in Echarts angezeigt werden

Verwendung Das Objekt kapselt die Methode wiederholter Ajax-Aufrufe

Implementierung einer domänenübergreifenden Ajax-Anfrage basierend auf Iframe, um Ajax-Daten auf der Webseite zu erhalten

Das obige ist der detaillierte Inhalt vonBeispielcode für die schwebende Schaltflächenkomponente React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage