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 相关文章推荐
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
微信小程序入门教程
Nov 18 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
express 项目分层实践详解
Dec 10 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 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获取昨天、今天及明天日期的方法
2016/02/03 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
python二分查找算法的递归实现方法
2016/05/12 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
对python中return与yield的区别详解
2020/03/12 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
单位未婚证明范本
2014/01/18 职场文书
企业管理培训感言
2014/01/27 职场文书
《灯光》教学反思
2014/02/08 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2014年法院工作总结
2014/11/24 职场文书
公司2014年度工作总结
2014/12/10 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
2016年母亲节广告语
2016/01/28 职场文书
Oracle笔记
2021/04/05 Oracle
Java中使用Filter过滤器的方法
2021/06/28 Java/Android