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.

Rendering

Installationsmethode

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

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

Komponentenadresse

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!