React Native悬浮按钮组件的示例代码
程序员文章站
2022-04-25 20:42:06
react native悬浮按钮组件:react-native-action-button,纯js组件,支持安卓和ios双平台,支持设置子按钮,支持自定义位置和样式和图标。...
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:点击事件
完整示例
完整代码:github - forrest23/reactnativecomponents: react native组件大全
本次示例代码在 component10文件夹中。
组件地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。