How to implement floating buttons in React Native-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to implement floating buttons in React Native

May 02, 2018 am 11:02 AM

native react levitate

This time I will show you how to implement floating buttons in React Native. What are the precautions for implementing floating buttons in React Native? The following is a practical case, let's take a look.

React Native Suspension

Button Group Parts: react-native-action-button, pure JS component, supports Android and IOS dual platforms, supports setting sub-buttons, supports custom position and style, and icon.

Rendering

Installation method

npm i react-native-action-button --save
react-native link react-native-vector-icons

Copy after login

Because the react-native-vector-icons icon component is used, a link needs to be made. If you have already used react-native-vector-icons in your project, this step is not required.

Sample code

&lt;View style={styles.container}&gt;
  &lt;Text style={styles.welcome}&gt;
   悬浮按钮组件示例
  &lt;/Text&gt;
  &lt;ActionButton buttonColor=&quot;rgba(231,76,60,1)&quot; position=&#39;left&#39; verticalOrientation=&#39;up&#39;&gt;
   &lt;ActionButton.Item buttonColor=&#39;#9b59b6&#39; title=&quot;New Task&quot; onPress={() =&gt; console.log("notes tapped!")}&gt;
   &lt;Icon name=&quot;ios-create-outline&quot; style={styles.actionButtonIcon} /&gt;
   &lt;/ActionButton.Item&gt;
   &lt;ActionButton.Item buttonColor=&#39;#3498db&#39; title=&quot;Notifications&quot; onPress={() =&gt; {}}&gt;
   &lt;Icon name=&quot;ios-notifications-off&quot; style={styles.actionButtonIcon} /&gt;
   &lt;/ActionButton.Item&gt;
   &lt;ActionButton.Item buttonColor=&#39;#1abc9c&#39; onPress={() =&gt; {}}&gt;
   &lt;Icon name=&quot;ios-done-all-outline&quot; style={styles.actionButtonIcon} /&gt;
   &lt;/ActionButton.Item&gt;
  &lt;/ActionButton&gt;
  &lt;ActionButton
   buttonColor=&quot;rgba(231,76,60,1)&quot;
   onPress={() =&gt; { alert('你点了我！')}}
   renderIcon={() =&gt; (&lt;View style={styles.actionButtonView}&gt;&lt;Icon name=&quot;ios-create-outline&quot; style={styles.actionButtonIcon} /&gt;
   &lt;Text style={styles.actionButtonText}&gt;新增&lt;/Text&gt;
   &lt;/View&gt;)}
  /&gt;
  &lt;/View&gt;

Copy after login

Main parameter description

ActionButton

size: The size of the button, the default is 56
active: Whether to display the button
position: The position of the button, which can be left center right
offsetX: The offset position on the X axis
offsetY : Offset position on the Y axis
onPress : Click
event
onLongPress : Long press event
buttonText: Button title
verticalOrientation: The direction of the pop-up button, up or down
renderIcon: Yes Customize the button display style. The default is a plus sign

ActionButton.Item

size: the size of the button , the default is 56
title: button title
buttonColor: button color
onPress: Click event

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!