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 相关文章推荐
xml转json的js代码
Aug 28 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 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
yii添删改查实例
2015/11/16 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
vuex的使用步骤
2021/01/06 Vue.js
python概率计算器实例分析
2015/03/25 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
Python下载的11种姿势(小结)
2020/11/18 Python
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
个人简历自我评价
2014/01/06 职场文书
大学生创业感言
2014/01/25 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
教育技术职业规划范文
2014/03/04 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
亮化工程实施方案
2014/03/17 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
Python+Appium新手教程
2021/04/17 Python