React中Native懸浮按鈕組件怎么用

小編給大家分享一下React中Native懸浮按鈕組件怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

React Native懸浮按鈕組件：react-native-action-button，純JS組件，支持安卓和IOS雙平臺，支持設置子按鈕，支持自定義位置和樣式和圖標。

效果圖

安裝方法

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

因為用到了react-native-vector-icons圖標組件，需要做下link。如果你項目中已經使用了react-native-vector-icons，那就不需要這步了。

示例代碼

<View style={styles.container}>
  <Text style={styles.welcome}>
   懸浮按鈕組件示例
  </Text>
  <ActionButton buttonColor="rgba(231,76,60,1)" position='left' verticalOrientation='up'>
   <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
   <Icon name="ios-create-outline" style={styles.actionButtonIcon} />
   </ActionButton.Item>
   <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
   <Icon name="ios-notifications-off" style={styles.actionButtonIcon} />
   </ActionButton.Item>
   <ActionButton.Item buttonColor='#1abc9c' 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>

主要參數說明

ActionButton

1. size：按鈕的大小，默認為56

2. active：是否顯示按鈕

3. position：按鈕的位置，可以為left center right

4. offsetX：X軸上的偏移位置

5. offsetY：Y軸上的偏移位置

6. onPress：點擊事件

7. onLongPress：長按事件

8. buttonText：按鈕標題

9. verticalOrientation：彈出按鈕的方向，up 或者 down

10. renderIcon：可以自定義按鈕顯示的樣式，默認是一個加號

ActionButton.Item

1. size：按鈕的大小，默認為56

2. title：按鈕標題

3. buttonColor：按鈕顏色

4. onPress：點擊事件

以上是“React中Native懸浮按鈕組件怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！