Detaillierte Erläuterung der Verwendung der Floating-Button-Komponente von React Native

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung der schwebenden Schaltflächengruppe geben. Was sind die Vorsichtsmaßnahmen für die Verwendung der schwebenden Schaltflächenkomponente von React Native? Ein praktischer Fall, schauen wir uns das gemeinsam an.

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, unterstützt benutzerdefinierte Position, Stil und Symbol .

Rendering

InstallationMethode

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

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('你点了我！')}}
   renderIcon={() => (<View style={styles.actionButtonView}><Icon name="ios-create-outline" style={styles.actionButtonIcon} />
   <Text style={styles.actionButtonText}>新增</Text>
   </View>)}
  />
  </View>

Hauptparameterbeschreibung

ActionButton

1. Größe: Die Größe der Schaltfläche, der Standardwert 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: Versatzposition auf der X-Achse

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

6. onPress: Klicken Sie auf Ereignis

7. onLongPress: Ereignis mit langem Drücken

8. buttonText: Schaltflächentitel

9. vertikalAusrichtung: 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: Schaltfläche Die Größe, der Standardwert ist 56

2. Titel: Schaltflächentitel

3. Schaltflächenfarbe: Schaltfläche Farbe

4. onPress: Klicken Sie auf Ereignis

Vollständiges Beispiel

Vollständig Code: GitHub - forrest23/ReactNativeComponents: React Native Components Collection

Dieser Beispielcode befindet sich im Ordner „Component10“.

Komponentenadresse

GitHub - mastermoo/react-native-action-button: anpassbare Multi-Action-Button-Komponente für React-native

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Einführung in die Express-Standardprotokollkomponente Morgan

Vue implementiert serverseitiges Rendering basierend auf Nuxt .js Die spezifischen Schritte

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der Floating-Button-Komponente von React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!