So implementieren Sie schwebende Schaltflächen in React Native

Dieses Mal zeige ich Ihnen, wie Sie schwebende Schaltflächen in React Native implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung schwebender Schaltflächen in React Native?

React Native SuspensionButton-GruppeTeil: 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 und 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: Klicken Sie auf das Ereignis

7. onLongPress : Langes Drücken-Ereignis

8. buttonText: Schaltflächentitel

9. vertikalAusrichtung: Die Richtung der Popup-Schaltfläche, nach oben oder unten

10. renderIcon: Ja Passen Sie den Anzeigestil der Schaltfläche an. 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: Klicken Sie auf Ereignis

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum automatischen Erstellen von REM für Webpack-Mobilterminals

Angular5-Schritte-Anleitung für Hinzufügen von Stilklassen zu Komponenten-Tags

Das obige ist der detaillierte Inhalt vonSo implementieren Sie schwebende Schaltflächen in React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!