Socket
Socket
Sign inDemoInstall

react-native-easy-floating-button

Package Overview
Dependencies
0
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-easy-floating-button

An react native button component by jsx


Version published
Maintainers
1
Weekly downloads
5
increased by150%

Weekly downloads

Readme

Source

react-native-easy-floating-button

npm downloads

Preview

Getting started

$ npm install react-native-easy-floating-button --save

Example

Check example in the folder.

$ cd example
$ npm install
$ react-native run-ios

Usage

GlobalFloatButton

edit your project root view,like this(detail please see example):

import {GlobalFloatButton} from from 'react-native-easy-floating-button';

let menu = [
        {name : 'notice', image : require('./notice_v2.png'), action : 'vt://notice/view'},
        {name : 'customer', image : require('./customer_v2.png'), action : ''},
        {name : 'attendance', image : require('./kaoqing_v2.png'), action : ''},
        {name : 'sales', image : require('./memberManage.png'), action : ''},
        {name : 'approval', image : require('./shenpi_v2.png'), action : ''},
        {name : 'add', image : ‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559109867602&di=3c152907ea75909f79d79a96ac66b715&imgtype=0&src=http%3A%2F%2Fimage.tupian114.com%2F20140417%2F13343689.png’, action : 'add', allowEdit : false} // allowEdit默认为true,为false时不可长按删除
    ];

<GlobalFloatButton
    buttonInitializeLeft={0} // 按钮初始化距离left位置
    buttonInitializeTop={400} // 按钮初始化距离top位置
    menus={menu} // 菜单数组
 />
 
 GlobalFloatButton.show(); //显示
 GlobalFloatButton.dismiss(); // 隐藏
 GlobalFloatButton.addMenuButton(button,index); //添加按钮,index可选,默认最后追加
 GlobalFloatButton.removeMenuButton(index); //移除按钮
 GlobalFloatButton.replaceMenuButton(buttonArr); //替换所有按钮
 GlobalFloatButton.getMenus(); //获取所有按钮数据
 GlobalFloatButton.onClickButton((index,data)=>{});//点击了某个按钮
 GlobalFloatButton.onRemoveButton((index,data)=>{});//删除了某个按钮

FloatButton

single page usage

import {FloatButton} from from 'react-native-easy-floating-button';
<FloatButton
    buttonInitializeLeft={0} // 按钮初始化距离left位置
    buttonInitializeTop={400} // 按钮初始化距离top位置
    menuOffsetY={-50} // 菜单Y轴偏移量负数往上移动
    menus={menu} // 菜单数组,和GlobalFloatButton一样
    moveRange={{width : 320,height:480}} // 可移动范围,对应父视图的宽高
    onClickButton={(index,data)=>{}} // 点击了某个按钮
    onRemoveButton={(index,data)=>{}} // 删除了某个按钮
 />

Properties

PropDefaultTypeDescription
buttonInitializeLeft0numberInitializes the left position of the button
buttonInitializeTop0numberInitializes the top position of the button
buttonSize60numberbutton size
buttonImagenullimageimage style button, require('./image.png') or {uri : 'http://'}
buttonViewnullviewcustom button view ,View componment
moveRange{width : screenW,height : screenH}objectbutton can move range
titlenullstringmenu top title
titleStylestylemenu top title style
backgroundColorrgba(0,0,0,0)stringmenu container background color
menuWidthscreenW - 60numbermenu default with
menuHeightscreenW - 60numbermenu default height
menuOffsetY0numbermenu offsety
menuBackgroundColorrgba(0,0,0,0.9)stringmenu background color
menuButtonImageStylestylemenu button image style
menuButtonTextStylestylemenu button text style
menuButtonDeleteImagenullimagemenu button right top delete image
menusarraymenu array
withoutMenufalseboolonly floating button,none menu
numberOfRow3numbermenu page number of row
numberOfColumn3numbermenu page number of column
clickAutoDismisstrueboolon click menu button, close menu
moveEnabletrueboolbutton is allow move
autoAdsorptiontrueboolwhether the button automatically approaches the edge
deleteAnimatetrueboolis show delete animated
onClickButtonfuncon click button
onRemoveButtonfuncon remove button

Methods

static show()
static dismiss(text, extraTop, bkColor)
static addMenuButton(button, index)

Parameters:

NameTypedefaultDescriptionoptional
buttonobjectnullbotton dataNO
indexnumber-1button indexYES
static removeMenuButton(index)

Parameters:

NameTypedefaultDescriptionoptional
indexnumberbutton indexYES
static replaceMenuButton(buttonArr)

Parameters:

NameTypedefaultDescriptionoptional
buttonArrarrayreplace buttonsNO
static getMenus()
static onClickButton(callback)

Parameters:

NameTypedefaultDescriptionoptional
callbackfuncon click button callbackNO
static onRemoveButton(callback)

Parameters:

NameTypedefaultDescriptionoptional
callbackfuncon remove button callbackNO

Keywords

FAQs

Last updated on 29 May 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc