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