React Native悬浮效果组件

  1. 云栖社区>
  2. 博客>
  3. 正文

React Native悬浮效果组件

code_xzh 2018-05-27 21:56:15 浏览2009
展开阅读全文

由于其他的原因,对于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还有一些其他的属性,大家可以通过官方资料来学习。

网友评论

登录后评论
0/500
评论
code_xzh
+ 关注