React Native悬浮效果组件-阿里云开发者社区

开发者社区> code_xzh> 正文

React Native悬浮效果组件

简介:
+关注继续查看

由于其他的原因,对于React Native相关的内容最近没有投入太多的关注,从去年年底出版了《React Native移动开发实战》后,对于React Native的关注就比较少了。最近由于公司之前的项目需要,所以React Native又重新回到我的世界,并且,最近出去面试深深的感觉到原生开发的饱和,不管是Android还是iOS,移动市场基本已经饱和,而更多的公司和开发者开始转向了前端,这对于移动开发人员,特别是有过跨平台开发经验或者小程序开发经验的开发者来说,学习前端是异常的容易。因此,我后面的目光也主要放在跨平台和大前端上。

对React Native发展历史比较了解的同学都知道,React Native早期除了性能外,生态也是特别差的,但是在经过了2017年的优化和发展之后,现在跨平台开发如React Native和Weex可以说是相当的吃香。并且,随着跨平台生态的逐渐形成,跨平台的组件和文章也越来越多。

今天给大家讲的是一个可以实现悬浮效果的组件,效果如下:
这里写图片描述
这里写图片描述

该库的源码地址为:https://github.com/mastermoo/react-native-action-button

安装

在项目中使用如下的命令安装react-native-action-button库:

npm i react-native-action-button --save

因为用到了react-native-vector-icons图标组件,需要还需要做下link,命令如下:

react-native link react-native-vector-icons

或者使用下面的命令执行link。

react-native link

使用实例

首先导入该。

import ActionButton from 'react-native-action-button';

例如下面是一个具体的实例代码:

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';


class App extends Component {

  render() {
    return (
      <View style={{flex:1, backgroundColor: '#f3f3f3'}}>
        {/* Rest of the app comes ABOVE the action button component !*/}
        <ActionButton buttonColor="rgba(231,76,60,1)">
          <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
            <Icon name="md-create" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
            <Icon name="md-notifications-off" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
            <Icon name="md-done-all" style={styles.actionButtonIcon} />
          </ActionButton.Item>
        </ActionButton>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white',
  },
});

其中,ActionButton组件是一个容器组件,即我们上面看到的“+”组件,而ActionButton.Item组件则是子组件。这有点类似于Android的RadioGrop和RadioButton的关系。

参数说明

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

当然除了上面介绍的一些常用属性外,react-native-action-button还有一些其他的属性,大家可以通过官方资料来学习。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9951 0
基于webpack Code Splitting实现react组件的按需加载
随着web应用功能越来越复杂,模块打包后体积越来越大,如何实现静态资源的按需加载,最大程度的减小首页加载模块体积和首屏加载时间,成为模块打包工具的必备核心技能。 webpack作为当下最为流行的模块打包工具,成为了react、vue等众多热门框架的官方推荐打包工具。其提供的Code Splitting(代码分割)特性正是实现模块按需加载的关键方式。 # 什么是Code Splitt
7726 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10878 0
Knative 核心概念介绍:Build、Serving 和 Eventing 三大核心组件 | 5月31日云栖夜读
在本刊开篇文章中,讲述了:阿里云智能事业群高级开发工程师 元毅 Knative 主要由 Build、Serving 和 Eventing 三大核心组件构成。Knative 正是依靠这三个核心组件,驱动着 Knative 这艘 Serverless 巨轮前行。
2598 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13699 0
React Native 自定义组件及属性
1). 安装prop-types npm install --save prop-types 2). 导入 import PropTypes from 'prop-types'; 3).
1244 0
编写 React 组件的最佳实践
本文讲的是编写 React 组件的最佳实践,当我一开始写 React 的时候,我记得有许多不同的方法来写组件,每个教程都大不相同。虽然从那以后 React 框架已经变得相当的成熟,但似乎仍然没有一种明确的写组件的“正确”方式。
1229 0
+关注
code_xzh
对前端移动客户端技术比较擅长。著有《React Native移动开发实战》和《Kotlin入门与实战》和《Weex跨平台实战》,《React Native移动开发进阶》即将出版,正在努力完成《Flutter跨平台开发实战》
736
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载