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 相关文章推荐
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 Javascript
Node实现搜索框进行模糊查询
Jun 28 Javascript
关于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
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Django中使用locals()函数的技巧
2015/07/16 Python
python黑魔法之参数传递
2016/02/12 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
Python基于WordCloud制作词云图
2019/11/29 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
介绍一下Mysql的存储引擎
2015/02/12 面试题
挑战杯创业计划书的写作指南
2014/01/07 职场文书
供货协议书
2014/04/22 职场文书
李敖北大演讲稿
2014/05/24 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
党员检讨书范文
2014/12/27 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
思想品德课教学反思
2016/02/24 职场文书
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android