前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React Native悬浮按钮组件

React Native悬浮按钮组件

作者头像
forrest23
发布2018-08-03 15:23:56
2.9K0
发布2018-08-03 15:23:56
举报
文章被收录于专栏:React Native开发圈

本文原创首发于公众号:ReactNative开发圈,转载需注明出处。

React Native悬浮按钮组件:react-native-action-button,纯JS组件,支持安卓和IOS双平台,支持设置子按钮,支持自定义位置和样式和图标。

效果图

安装方法

代码语言:javascript
复制
npm i react-native-action-button --save
react-native link react-native-vector-icons

因为用到了react-native-vector-icons图标组件,需要做下link。如果你项目中已经使用了react-native-vector-icons,那就不需要这步了。

示例代码

代码语言:javascript
复制
<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组件大全,介绍React Native常用组件的使用方法和使用示例本次示例代码在 Component10文件夹中。请不要吝啬你们的Star

组件地址

GitHub - mastermoo/react-native-action-button: customizable multi-action-button component for react-native

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-04-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 ReactNative开发圈 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果图
  • 安装方法
  • 示例代码
  • 主要参数说明
    • ActionButton
      • ActionButton.Item
      • 完整示例
      • 组件地址
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档