React-native-easy-floating-button-menu-icons NPM

react-native-easy-floating-button

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

Prop	Default	Type	Description
buttonInitializeLeft	0	`number`	Initializes the left position of the button
buttonInitializeTop	0	`number`	Initializes the top position of the button
buttonSize	60	`number`	button size
buttonImage	null	`image`	image style button, require('./image.png') or {uri : 'http://'}
buttonView	null	`view`	custom button view ,View componment
moveRange	{width : screenW,height : screenH}	`object`	button can move range
title	null	`string`	menu top title
titleStyle		`style`	menu top title style
backgroundColor	rgba(0,0,0,0)	`string`	menu container background color
menuWidth	screenW - 60	`number`	menu default with
menuHeight	screenW - 60	`number`	menu default height
menuOffsetY	0	`number`	menu offsety
menuBackgroundColor	rgba(0,0,0,0.9)	`string`	menu background color
menuButtonImageStyle		`style`	menu button image style
menuButtonTextStyle		`style`	menu button text style
menuButtonDeleteImage	null	`image`	menu button right top delete image
menus		`array`	menu array
withoutMenu	false	`bool`	only floating button,none menu
numberOfRow	3	`number`	menu page number of row
numberOfColumn	3	`number`	menu page number of column
clickAutoDismiss	true	`bool`	on click menu button, close menu
moveEnable	true	`bool`	button is allow move
autoAdsorption	true	`bool`	whether the button automatically approaches the edge
deleteAnimate	true	`bool`	is show delete animated
onClickButton		`func`	on click button
onRemoveButton		`func`	on remove button

Methods

static show()

static dismiss(text, extraTop, bkColor)

static addMenuButton(button, index)

Parameters:

Name	Type	default	Description	optional
button	`object`	null	botton data	NO
index	`number`	-1	button index	YES

static removeMenuButton(index)

Parameters:

Name	Type	default	Description	optional
index	`number`		button index	YES

static replaceMenuButton(buttonArr)

Parameters:

Name	Type	default	Description	optional
buttonArr	`array`		replace buttons	NO

static getMenus()

static onClickButton(callback)

Parameters:

Name	Type	default	Description	optional
callback	`func`		on click button callback	NO

static onRemoveButton(callback)

Parameters:

Name	Type	default	Description	optional
callback	`func`		on remove button callback	NO

react-native react-native-button react-native-floating react-native-floating-button react-native-easy-floating-button react-native-menu button menu floating

@infinitebrahmanuniverse/nolb-react-native-e @everything-registry/sub-chunk-2577 @zalastax/nolb-react-native-e

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago