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 Native悬浮按钮组件的示例代码就介绍到这了。只有想不到的事,没有做不到的事。更多相关React Native悬浮按钮组件的示例代码内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
react axios 跨域访问一个或多个域名问题

React+ajax+java实现上传图片并预览功能

React组件对子组件children进行加强的方法

在React中写一个Animation组件为组件进入和离开加上动画/过度效果

回顾Javascript React基础