Sample code for React Native floating button component

This article mainly introduces the sample code of the React Native floating button component. The article introduces the sample code in very detail. It has certain reference learning value for everyone's study or work. Friends who need it can take a look together. .

React Native floating button component: react-native-action-button, a pure JS component, supports Android and IOS dual platforms, supports setting sub-buttons, and supports custom positions, styles and icons.

Rendering

##Installation method

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

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 needed.

Sample code

<View style={styles.container}>
  <Text style={styles.welcome}>
   悬浮按钮组件示例
  </Text>
  <ActionButton buttonColor="rgba(231,76,60,1)" position=&#39;left&#39; verticalOrientation=&#39;up&#39;>
   <ActionButton.Item buttonColor=&#39;#9b59b6&#39; title="New Task" onPress={() => console.log("notes tapped!")}>
   <Icon name="ios-create-outline" style={styles.actionButtonIcon} />
   </ActionButton.Item>
   <ActionButton.Item buttonColor=&#39;#3498db&#39; title="Notifications" onPress={() => {}}>
   <Icon name="ios-notifications-off" style={styles.actionButtonIcon} />
   </ActionButton.Item>
   <ActionButton.Item buttonColor=&#39;#1abc9c&#39; onPress={() => {}}>
   <Icon name="ios-done-all-outline" style={styles.actionButtonIcon} />
   </ActionButton.Item>
  </ActionButton>

  <ActionButton
   buttonColor="rgba(231,76,60,1)"
   onPress={() => { alert(&#39;你点了我！&#39;)}}
   renderIcon={() => (<View style={styles.actionButtonView}><Icon name="ios-create-outline" style={styles.actionButtonIcon} />
   <Text style={styles.actionButtonText}>新增</Text>
   </View>)}
  />
  </View>

Main parameters Description

ActionButton

1. size: The size of the button, the default is 56

2. active: Whether to display the button

3. position: The position of the button, which can be left center right

4. offsetX: Offset position on the X axis

5. offsetY: Offset position on the Y axis

6. onPress: Click event

7. onLongPress: Long press event

8. buttonText: Button title

9. verticalOrientation: The direction of the popup button, up or down

10. renderIcon: You can customize the style of button display. The default is a plus sign

ActionButton.Item

1. size: The size of the button, the default is 56

2. title: The button title

## buttonColor: Button color
onPress: Click event
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Analysis and solutions to the reasons why the data obtained by Ajax is not displayed in echarts

Usage Object encapsulates the method of ajax repeated calls

Implements ajax cross-domain request based on iframe to obtain ajax data in the web page

The above is the detailed content of Sample code for React Native floating button component. For more information, please follow other related articles on the PHP Chinese website!