React Native悬浮按钮组件的示例代码

本篇文章主要介绍了react native悬浮按钮组件的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

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

效果图

React Native悬浮按钮组件的示例代码

安装方法

npm i react-native-action-button --savereact-native link react-native-vector-icons

登录后复制

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

示例代码

     悬浮按钮组件示例        console.log("notes tapped!")}>          {}}>          {}}>           { alert('你点了我!')}}   renderIcon={() => (   新增   )}  />  

登录后复制

主要参数说明

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悬浮按钮组件的示例代码的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2756167.html

(0)
上一篇 2025年3月8日 07:27:52
下一篇 2025年3月8日 07:28:00

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • express默认日志组件morgan的方法

    morgan是express默认的日志中间件,这篇文章主要介绍了express默认日志组件morgan的方法,现在分享给大家,也给大家做个参考。 章节概览 morgan是express默认的日志中间件,也可以脱离express,作为node…

    编程技术 2025年3月8日
    200
  • 怎样使用react redux中间件

    这次给大家带来怎样使用react redux中间件,使用react redux中间件的注意事项有哪些,下面就是实战案例,一起来看一下。 用过react的同学都知道在redux的存在,redux就是一种前端用来存储数据的仓库,并对改仓库进行增…

    2025年3月8日 编程技术
    200
  • 怎样使用React Native做出悬浮按钮组件

    这次给大家带来怎样使用React Native做出悬浮按钮组件,使用React Native做出悬浮按钮组件的注意事项有哪些,下面就是实战案例,一起来看一下。 React Native悬浮按钮组件:react-native-action-b…

    2025年3月8日
    200
  • 使用Vue制作图片轮播组件思路详解

    这篇文章主要介绍了使用vue制作图片轮播组件思路详解,需要的朋友可以参考下 之前一直都没有认真的写过一个组件。以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,…

    2025年3月8日 编程技术
    200
  • angular4 共享服务在多个组件中数据通信的示例

    本篇文章主要介绍了angular4 共享服务在多个组件中数据通信的示例,现在分享给大家,也给大家做个参考。 应用场景,不同组件中操作统一组数据,不论哪个组件对数据进行了操作,其他组件中立马看到效果。这样他们就要共用一个服务实例,是本次的重点…

    2025年3月8日
    200
  • 怎样实现vue父子组件间通信

    这次给大家带来怎样实现vue父子组件间通信,实现vue父子组件间通信的注意事项有哪些,下面就是实战案例,一起来看一下。 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。那么组…

    2025年3月8日 编程技术
    200
  • vue文件树组件使用详解

    这篇文章主要为大家详细介绍了vue文件树组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了vue文件树组件的实现方法,供大家参考,具体内容如下 本文主要是分析vue官方仓库里的文件树组件[vue gith…

    编程技术 2025年3月8日
    200
  • 如何使用Vue内父子组件通讯todolist组件

    这次给大家带来如何使用Vue内父子组件通讯todolist组件,使用Vue内父子组件通讯todolist组件的注意事项有哪些,下面就是实战案例,一起来看一下。 一、todolist功能开发 提交 {{item}} new Vue({ el:…

    2025年3月8日
    200
  • 如何搭建React全家桶环境

    这次给大家带来如何搭建React全家桶环境,搭建React全家桶环境的注意事项有哪些,下面就是实战案例,一起来看一下。 环境搭建 1.从零开始搭建webpack+react开发环境 2.引入Typescript 安装依赖 npm i -S …

    编程技术 2025年3月8日
    200
  • 浅谈React高阶组件

    这篇文章主要介绍了浅谈react高阶组件,现在分享给大家,也给大家做个参考。 前段时间在工作中写Hybrid页面时遇到了这样的一个场景,公司需要一系列的活动组件,在每个组件注册的时候都需要调用App端提供的一个接口。一开始也考虑了几种方式,…

    2025年3月8日
    200

发表回复

登录后才能评论