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
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：点击事件
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
ajax获取到数据放入echarts里不显示的原因分析及解决办法
使用对象封装ajax重复调用的方法
基于iframe实现ajax跨域请求 获取网页中ajax数据
以上就是react native悬浮按钮组件的示例代码的详细内容。