React Native悬浮效果组件
由于其他的原因,对于React Native相关的内容最近没有投入太多的关注,从去年年底出版了《React Native移动开发实战》后,对于React Native的关注就比较少了。最近由于公司之前的项目需要,所以React Native又重新回到我的世界,并且,最近出去面试深深的感觉到原生开发的饱和,不管是Android还是iOS,移动市场基本已经饱和,而更多的公司和开发者开始转向了前端,这对于移动开发人员,特别是有过跨平台开发经验或者小程序开发经验的开发者来说,学习前端是异常的容易。因此,我后面的目光也主要放在跨平台和大前端上。
对React Native发展历史比较了解的同学都知道,React Native早期除了性能外,生态也是特别差的,但是在经过了2017年的优化和发展之后,现在跨平台开发如React Native和Weex可以说是相当的吃香。并且,随着跨平台生态的逐渐形成,跨平台的组件和文章也越来越多。
今天给大家讲的是一个可以实现悬浮效果的组件,效果如下:
该库的源码地址为:https://github.com/mastermoo/react-native-action-button
安装
在项目中使用如下的命令安装react-native-action-button库:
npm i react-native-action-button --save
因为用到了react-native-vector-icons图标组件,需要还需要做下link,命令如下:
react-native link react-native-vector-icons
或者使用下面的命令执行link。
react-native link
使用实例
首先导入该。
import ActionButton from 'react-native-action-button';
例如下面是一个具体的实例代码:
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';class App extends Component {render() {return (<View style={{flex:1, backgroundColor: '#f3f3f3'}}>{/* Rest of the app comes ABOVE the action button component !*/}<ActionButton buttonColor="rgba(231,76,60,1)"><ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}><Icon name="md-create" style={styles.actionButtonIcon} /></ActionButton.Item><ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}><Icon name="md-notifications-off" style={styles.actionButtonIcon} /></ActionButton.Item><ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}><Icon name="md-done-all" style={styles.actionButtonIcon} /></ActionButton.Item></ActionButton></View>);}}const styles = StyleSheet.create({actionButtonIcon: {fontSize: 20,height: 22,color: 'white',},
});
其中,ActionButton组件是一个容器组件,即我们上面看到的“+”组件,而ActionButton.Item组件则是子组件。这有点类似于Android的RadioGrop和RadioButton的关系。
参数说明
ActionButton
- size:按钮的大小,默认为56
- active:是否显示按钮
- position:按钮的位置,可以为left center right
- offsetX:X轴上的偏移位置
- offsetY:Y轴上的偏移位置
- onPress:点击事件
- onLongPress:长按事件
- buttonText:按钮标题
- verticalOrientation:弹出按钮的方向,up 或者 down
- renderIcon:可以自定义按钮显示的样式,默认是一个加号
ActionButton.Item
- size:按钮的大小,默认为56
- title:按钮标题
- buttonColor:按钮颜色
- onPress:点击事件
当然除了上面介绍的一些常用属性外,react-native-action-button还有一些其他的属性,大家可以通过官方资料来学习。
React Native悬浮效果组件相关推荐
- React Native 二 常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...
- React Native手势密码组件
本文原创首发于公众号:ReactNative开发圈,转载需注明出处. 这次介绍的React Native手势密码组件为react-native-gesture-password,纯JavaScript ...
- React Native知识2-Text组件
Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加 ...
- 初步了解React Native的新组件库firstBorn
first-born is a React Native UI Component Framework, which follows the design methodology Atomic Des ...
- 从零学React Native之12 组件的生命周期
一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5 ...
- React Native 中 TextInput 组件和中文输入冲突
原文转载自我的 Github 博客 在用 React Native (下称 RN) 开发面向国人的应用时,不可避免会有用户使用中文输入法的情景.在 RN 中,负责输入内容的控件是 <TextIn ...
- CocosCreator之节点悬浮效果组件
莫找借口失败,只找理由成功. 效果描述:就是一个节点在哪儿飘啊飘的.动画组件也能实现. 组件:FloatMove.ts const { ccclass, property, executeInEdit ...
- React Native知识4-Image组件
一个用于显示多种不同类型图片的React组件,包括网络图片.静态资源.临时的本地图片.以及本地磁盘上的图片(如相册)等 一:属性 1:onLayout function 当元素挂载或者布局改变的时候调 ...
- React Native知识7-TabBarIOS组件
一:简介 两个TabBarIOS和TabBarIOS.Item组件可以实现页面Tab切换的功能,Tab页面切换的架构在应用开发中还是非常常见的.如:腾讯QQ,淘宝,美团外卖等等 二:TabBarIOS ...
最新文章
- 情感分析的描述、基于词袋模型和word2vec模型的情感分析实现
- php对二维数据排序
- 玩转SSRS第十篇---自定义代码
- QT的QCommandLineParser类的使用
- python中pickle简介
- matlab有趣表白程序_小人表白MATLAB代码
- WSAGetLastError() 返回的错误
- mybatis基础总结01
- 企业如何确定需要什么样的产品经理
- 10 signs that you’re not cut out to be an IT manager
- cad vba 打开文件对话框_Excel VBA和文件夹-1.7通过对话框灵活选定文件夹并打开对应文件...
- 计算机辅助三维参数化设计是什么,滚子链轮的计算机辅助三维参数化设计.pdf...
- winserve2016 万能驱动网卡_万能网卡驱动win10
- cpt怎么转换成HTML,Excel直接转成模板cpt
- 类编程的WAF(下)
- 容联云通讯发送短信java实现
- 失意的企业家,排队和俞敏洪做直播
- 利用python库moviepy,快速剪辑视频
- 在Vivado下如何判断芯片是多die芯片-关于SSI的多方面解答
- 麦克风阵列声源定位四通道麦克风数据库及TDOA双曲交汇定位算法实验
热门文章
- Corosync与Pacemaker实现nfs作为共享存储的MySQL高可用
- web 页面table 斜线效果 跨越多行和 多列
- 配置登入是显示服务器信息
- IT兄弟连 JavaWeb教程 文件下载技术
- sql for xml path用法
- 牛腩视频播放管理系统
- 【译】技能测试解决方案:Python中的数据科学(一)
- 一天一点linux(15):Ubuntu14.04 如何安装字体?
- error C2143: 语法错误 : 缺少“;”(在“using”的前面)
- sshd iptable 傻瓜配置