Grafik-Tutorial zur nativen Floating-Button-Komponente reagieren

Dieses Mal bringe ich Ihnen ein grafisches Tutorial zur React Native Floating-Button-Gruppe . Was sind die Vorsichtsmaßnahmen bei der Verwendung der React Native Floating-Button-Komponente? 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 und unterstützt benutzerdefinierte Positionen, Stile und Symbole.

Rendering

Installationsmethode

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 Erläuterung der Verwendung des Webpack-Hot-Modul-Ersatzes

JS-Crawling-Seiten-Bildlaufleiste

Detaillierte Erläuterung der drei Arten von $() in jQuery

Zusammenfassung des JS-Sortieralgorithmus

Das obige ist der detaillierte Inhalt vonGrafik-Tutorial zur nativen Floating-Button-Komponente reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!