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：点击事件
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何部署vue.js项目nginx
怎样使用react redux中间件
怎样在vue中使用sortable
以上就是怎样使用react native做出悬浮按钮组件的详细内容。