Anwenden der React Native-Floating-Button-Komponente in praktischen Fällen (mit Code)

Dieses Mal werde ich Ihnen die Anwendung der React Native-Floating-Button-Komponente (mit Code) in einem praktischen Fall vorstellen. Was sind die Vorsichtsmaßnahmen für die Anwendung der React Native-Floating-Button-Komponente in einem praktischen Fall? , lass uns einen Blick darauf werfen.

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

Weil Wenn 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 mittig rechts sein kann

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

5. offsetY : Versatzposition auf der Y-Achse

6. onPress: Klickereignis

7. onLongPress: Langdruckereignis

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

2. Titel: Schaltflächentitel

3. ButtonColor: Schaltflächenfarbe

4. onPress: click event

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 Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung des praktischen Falls von BubbleTransition

Vue+animate erstellt Übergangsanimationen im Projekt

Das obige ist der detaillierte Inhalt vonAnwenden der React Native-Floating-Button-Komponente in praktischen Fällen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!