请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

santomegonzalo/react-native-floating-action: Material design action button for R ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

santomegonzalo/react-native-floating-action

开源软件地址(OpenSource Url):

https://github.com/santomegonzalo/react-native-floating-action

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

React Native Floating Action

Floating action button for React Native

Table of Content:

Expo example

Open the following click on your phone: Expo link

or user your phone and scan the following QR:

Use it on Expo

Example of how Expo looks

Installation

npm i react-native-floating-action --save

or

yarn add react-native-floating-action

Example

Take a look into example/ReactNativeFloatingAction-Expo

To execute the example using Expo run the following command:

yarn run run:example

or open Expo link from your mobile

How to use it

First step: import the component:

import { FloatingAction } from "react-native-floating-action";

Second step: define the buttons

const actions = [
  {
    text: "Accessibility",
    icon: require("./images/ic_accessibility_white.png"),
    name: "bt_accessibility",
    position: 2
  },
  {
    text: "Language",
    icon: require("./images/ic_language_white.png"),
    name: "bt_language",
    position: 1
  },
  {
    text: "Location",
    icon: require("./images/ic_room_white.png"),
    name: "bt_room",
    position: 3
  },
  {
    text: "Video",
    icon: require("./images/ic_videocam_white.png"),
    name: "bt_videocam",
    position: 4
  }
];

Third step: use it

<View style={styles.container}>
  <Text style={styles.example}>Floating Action example</Text>
  <FloatingAction
    actions={actions}
    onPressItem={name => {
      console.log(`selected button: ${name}`);
    }}
  />
</View>

Open and hide it programatically

There are some cases where you want to show or hide the component without pressing the main button:

<FloatingAction
  ref={(ref) => { this.floatingAction = ref; }}
  actions={[...]}
  ...
/>

and then:

this.floatingAction.animateButton();

Reference

Props

actions: Array<Object>

Default: []

Actions to be shown when user press the main Floating Button. See Actions section for more info about the Object keys and values.

buttonColor: String

Deprecated! use color instead!

color: String

Default: '#1253bc'

Color of the main button. Pass this String as an hexadecimal color respecting the default format.

distanceToEdge: Number | Object

Default: 30

Distance from button to edge. Can be a Number or an Object respecting the { vertical: Number, horizontal: Number } format.

visible: Boolean

Default: true

Hide or Show the component using an animation.

overlayColor: String

Default: 'rgba(68, 68, 68, 0.6)'

Color of the background overlay. The String must respect the rgba() pattern described in default value.

position: String

Default: 'right'

Position to render the main button and actions, options: (left, right, center).

overrideWithAction: String

Default: 'false'

Override the main action with the first action inside list actions, will not show other action.

floatingIcon: Node

Default: ReactElement

Change the default plus icon using require(pathToImage) or ReactElement.

showBackground: Boolean

Default: true

Show or Hide background after open.

openOnMount: Boolean

Default: false

Open component after mounting it, useful on some weird cases like tutorials.

actionsPaddingTopBottom: Number

Default: 8

Change distance between actions.

iconWidth: Number

Default: 15

Icon width of the main button.

iconHeight: Number

Default: 15

Icon height of the main button.

buttonSize: Number

Default: 56

Size of the main button.

listenKeyboard: Boolean

Default: false

Change position when the keyboard will appear.

dismissKeyboardOnPress: Boolean

Default: false

Dismiss keyboard when user press on the main button.

shadow: Object

Default: { shadowOpacity: 0.35, shadowOffset: { width: 0, height: 5 }, shadowColor: "#000000", shadowRadius: 3 }

Change how we render the shadow of every button, this style will apply to the main button and to every action button.

onPressItem: Function

Function to be called as soon as the user select an option from actions. Will return the name of the action.

onPressMain: Function

Function to be called as soon as use click main button and will return true or false depeneding of the state.

onPressBackdrop: Function

Function to be called as soon as the backdrop is clicked.

onClose: Function

Function to be called after set state to false.

onOpen: Function

Function to be called after set state to true.

onStateChange: Function

Function to be called after every state change. Will return state object.

animated: Boolean

Default: true

Enable the animation to be called after every state change. Will return state object.

actions Props

color: String

Default: '#1253bc'

Color of the action button.

iconColor: String

Default: '#ffffff'

Change default icon color

icon: Any

Icon to be rendered inside the action, will accept an URL or React.Image. If we want to send an URL we need to send it in this way: icon: { uri: 'https://imageurl.com' } if we want to send a React.Image we will use it in this way: icon: require('path/image').

name: String

Name of the icon, this name is used as parameter for onPressItem prop.

buttonSize: Number

Default: 40

Size of of the action button.

text: String

Text to show near to the button. (Only apply for position = ['left', 'right']).

textStyle: Object | Array

Default: { fontSize: 12 }

Style to update text size.

textBackground: String

Default: #ffffff

Background color for Text container.

textColor: String

Default: #444444

Text color for every action.

elevation: Number

*Deprecated! use textElevation instead!

textElevation: Number

Default: 5

Elevation property (also modifies "shadowOffset" in iOS)

render: Function => React Node

Default: 5

Custom render function for Action. If provided, other properties are not applicable. The provided function should return a React Node

margin: Number

Default: 8

Additional margin for action. This property is useful when we want to override the current margin for example using custom render

size: Number

Default: 40

Size of of the icon rendered inside the action

TODO

  • first implementation
  • example
  • add colors configurations
  • add more positions like left, center and right
  • support hide or show the component with an animation
  • change plus icon to be customizable
  • use components as icon
  • hide background
  • open on mounting
  • migrate to TypeScript
  • allow user defined animations
  • use crazy animations



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

热门推荐
阅读排行榜
  • ** REJECT ** DO NOT USE THIS CANDIDATE NUMBER. ConsultIDs: none. Reason: This ca

    阅读:351|2022-09-23
  • Simple Task Scheduling System v1.0 was discovered to contain a SQL injection vul

    阅读:250|2022-09-18
  • Simple Task Scheduling System v1.0 was discovered to contain a SQL injection vul

    阅读:264|2022-09-18
  • Novel-Plus v3.6.2 was discovered to contain a hard-coded JWT key located in the

    阅读:268|2022-09-18
  • Novel-Plus v3.6.2 was discovered to contain an arbitrary file download vulnerabi

    阅读:270|2022-09-18
  • Simple Task Scheduling System v1.0 was discovered to contain a SQL injection vul

    阅读:192|2022-09-18
  • An issue was discovered in the Arm Mali GPU Kernel Driver. A non-privileged user

    阅读:301|2022-09-18
  • HashiCorp Boundary up to 0.10.1 did not properly perform data integrity checks t

    阅读:218|2022-09-18
  • In D-Link DIR-816 A2_v1.10CNB04.img a command injection vulnerability occurs in

    阅读:260|2022-09-18
  • D-Link DIR-816 A2_v1.10CNB04.img is vulnerable to Command Injection via /goform/

    阅读:219|2022-09-18

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap