react native悬浮按钮组件:react-native-action-button,纯js组件,支持安卓和ios双平台,支持设置子按钮,支持自定义位置和样式和图标。
效果图
安装方法
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
actionbutton.item
完整示例
完整代码:github - forrest23/reactnativecomponents: react native组件大全
本次示例代码在 component10文件夹中。
组件地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
Android 入门第七讲01-数据存储(数据存储概述,文件存储(raw和asserts目录读写,data/data/包名目录读写,sdcard目录读写),SharedPreferences读写)
vue-axios系列:axios拦截器,配置请求头,配置请求参数
Vuejs 针对 安卓低版本 、ios9.x 不兼容 ES6语法导致失效解决方法
网友评论