react native懸浮按鈕組件圖文教學

這次帶給大家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，那就不需要這步了。

範例程式碼

  悬浮按钮组件示例    console.log("notes tapped!")}>    {}}>    {}}>     { alert('你点了我！')}} renderIcon={() => ( 新增 )} /> 

#主要參數說明

size：按鈕的大小，預設為56
active：是否顯示按鈕
position：按鈕的位置，可以為left center right
offsetX：X軸上的偏移位置
offsetY ：Y軸上的偏移位置

6. onPress：點選

   事件
onLongPress：長按事件
buttonText：按鈕標題
verticalOrientation：彈出按鈕的方向，up 或down
renderIcon：可以自訂按鈕顯示的樣式，預設為加號

1. ##size：按鈕的大小，預設為56

2. title：按鈕標題

3. #buttonColor：按鈕顏色

4. onPress：點選事件

完整範例

元件位址

webpack熱模組替換使用詳解

JS抓取頁面捲軸

jQuery三種$()使用詳解

#JS排序演算法小結

以上是react native懸浮按鈕組件圖文教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！