脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Native悬浮按钮组件

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

 更新时间：2018年04月05日 09:52:12   作者：forrest23  
本篇文章主要介绍了React Native悬浮按钮组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。

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

  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：点击事件

完整示例

完整代码：GitHub - forrest23/ReactNativeComponents: React Native组件大全

本次示例代码在 Component10文件夹中。

组件地址

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • React高阶组件使用教程详解

    React高阶组件使用教程详解

    高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧
    2022-12-12
  • React Native 通告消息竖向轮播组件的封装

    React Native 通告消息竖向轮播组件的封装

    这篇文章主要介绍了React Native 通告消息竖向轮播组件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 详解基于webpack搭建react运行环境

    详解基于webpack搭建react运行环境

    本篇文章主要介绍了详解基于webpack搭建react运行环境，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • React Native自定义组件与输出方法详解

    React Native自定义组件与输出方法详解

    这篇文章主要给大家介绍了关于React Native自定义组件与输出方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • React hooks使用规则和作用

    React hooks使用规则和作用

    这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定，节后实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-03-03
  • React初始化渲染过程示例详解

    React初始化渲染过程示例详解

    这篇文章主要为大家介绍了React初始化渲染过程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • React避免子组件无效刷新的三种解决方案

    React避免子组件无效刷新的三种解决方案

    这篇文章主要给大家介绍了React三种避免子组件无效刷新的解决方案,使用React.memo,使用React.useMemo或React.useCallback,将子组件作为children来传递这三种方案,文章通过代码介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • React组件间传值及跨组件通信详解

    React组件间传值及跨组件通信详解

    这篇文章主要介绍了React组件间传值及跨组件通信的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09
  • React实现图片缩放的示例代码

    React实现图片缩放的示例代码

    这篇文章主要为大家详细介绍了如何使用React实现图片缩放的功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以了解下
    2023-10-10
  • React 路由使用示例详解

    React 路由使用示例详解

    这篇文章主要介绍了React 路由使用,使用路由时需要为组件指定一个路由的path，最终会以path为基础，进行页面的跳转，具体使用先看个简单示例，该示例比较简单就是两个Tab页面的来回切换
    2022-05-05

最新评论