React Native悬浮按钮组件的示例代码


Posted in Javascript onApril 05, 2018

React Native悬浮按钮组件:react-native-action-button,纯JS组件,支持安卓和IOS双平台,支持设置子按钮,支持自定义位置和样式和图标。

效果图

React Native悬浮按钮组件的示例代码

安装方法

npm i react-native-action-button --save
react-native link react-native-vector-icons

因为用到了react-native-vector-icons图标组件,需要做下link。如果你项目中已经使用了react-native-vector-icons,那就不需要这步了。

示例代码

<View style={styles.container}>
  <Text style={styles.welcome}>
   悬浮按钮组件示例
  </Text>
  <ActionButton buttonColor="rgba(231,76,60,1)" position='left' verticalOrientation='up'>
   <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
   <Icon name="ios-create-outline" style={styles.actionButtonIcon} />
   </ActionButton.Item>
   <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
   <Icon name="ios-notifications-off" style={styles.actionButtonIcon} />
   </ActionButton.Item>
   <ActionButton.Item buttonColor='#1abc9c' onPress={() => {}}>
   <Icon name="ios-done-all-outline" style={styles.actionButtonIcon} />
   </ActionButton.Item>
  </ActionButton>

  <ActionButton
   buttonColor="rgba(231,76,60,1)"
   onPress={() => { alert('你点了我!')}}
   renderIcon={() => (<View style={styles.actionButtonView}><Icon name="ios-create-outline" style={styles.actionButtonIcon} />
   <Text style={styles.actionButtonText}>新增</Text>
   </View>)}
  />
  </View>

主要参数说明

ActionButton

  1. size:按钮的大小,默认为56
  2. active:是否显示按钮
  3. position:按钮的位置,可以为left center right
  4. offsetX:X轴上的偏移位置
  5. offsetY:Y轴上的偏移位置
  6. onPress:点击事件
  7. onLongPress:长按事件
  8. buttonText:按钮标题
  9. verticalOrientation:弹出按钮的方向,up 或者 down
  10. renderIcon:可以自定义按钮显示的样式,默认是一个加号

ActionButton.Item

  1. size:按钮的大小,默认为56
  2. title:按钮标题
  3. buttonColor:按钮颜色
  4. onPress:点击事件

完整示例

完整代码:GitHub - forrest23/ReactNativeComponents: React Native组件大全

本次示例代码在 Component10文件夹中。

组件地址

GitHub - mastermoo/react-native-action-button: customizable multi-action-button component for react-native

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
JS定时器实例
Apr 17 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 #Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 #Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 #Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 #Javascript
vue中mint-ui的使用方法
Apr 04 #Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 #Javascript
JS实现DOM删除节点操作示例
Apr 04 #Javascript
You might like
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
如何写php程序?
2006/12/08 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
借款协议书范本
2014/04/22 职场文书
村党支部换届选举方案
2014/05/02 职场文书
运动会开幕词
2015/01/28 职场文书
教师培训简讯
2015/07/20 职场文书