React中Native悬浮按钮组件怎么用-成都快上网建站

React中Native悬浮按钮组件怎么用

小编给大家分享一下React中Native悬浮按钮组件怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

抚宁网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作,到程序开发,运营维护。成都创新互联成立于2013年到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联

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

效果图

React中Native悬浮按钮组件怎么用

安装方法

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

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

示例代码


  
   悬浮按钮组件示例
  
  
    console.log("notes tapped!")}>
   
   
    {}}>
   
   
    {}}>
   
   
  

   { alert('你点了我!')}}
   renderIcon={() => (
   新增
   )}
  />
  

主要参数说明

ActionButton

  1. size:按钮的大小,默认为56

  2. active:是否显示按钮

  3. position:按钮的位置,可以为left center right

  4. offsetX:X轴上的偏移位置

  5. offsetY:Y轴上的偏移位置

  6. onPress:点击事件

  7. onLongPress:长按事件

  8. buttonText:按钮标题

  9. verticalOrientation:弹出按钮的方向,up 或者 down

  10. renderIcon:可以自定义按钮显示的样式,默认是一个加号

ActionButton.Item

  1. size:按钮的大小,默认为56

  2. title:按钮标题

  3. buttonColor:按钮颜色

  4. onPress:点击事件

以上是“React中Native悬浮按钮组件怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前标题:React中Native悬浮按钮组件怎么用
分享URL:http://kswjz.com/article/jdesjp.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流