由于其他的原因，对于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库：
@H_301_14@npm i react-native-action-button --save因为用到了react-native-vector-icons图标组件，需要还需要做下link，命令如下：
@H_301_14@react-native link react-native-vector-icons或者使用下面的命令执行link。
@H_301_14@react-native link使用实例
首先导入该。
@H_301_14@import ActionButton from 'react-native-action-button';例如下面是一个具体的实例代码：
@H_301_14@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还有一些其他的属性，大家可以通过官方资料来学习。
原文链接：https://www.f2er.com/react/301474.html