react-native-easy-floating-button

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