Detailed explanation of the use of react native's floating button component

This time I will bring you a detailed explanation of the use of react native's floating button button group, and what are the precautions for using the react native floating button component. The following is a practical case, let's take a look take a look.

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

Rendering

#InstallationMethod

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('你点了我！')}}
   renderIcon={() => (<View style={styles.actionButtonView}><Icon name="ios-create-outline" style={styles.actionButtonIcon} />
   <Text style={styles.actionButtonText}>新增</Text>
   </View>)}
  />
  </View>

Main parameter 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: The 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 pop-up button, up or down

10. renderIcon: Yes Customize the button display style. The default is a plus sign

ActionButton.Item

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

2. title: button title

3. buttonColor: button color

4. onPress: Click event

Full example

Full code: GitHub - forrest23/ReactNativeComponents: React Native component collection

This sample code is in the Component10 folder.

Component address

GitHub - mastermoo/react-native-action-button: customizable multi-action-button component for react-native

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!

Recommended reading:

Detailed introduction of express default log component morgan

Vue implements server-side rendering based on Nuxt.js The specific steps

The above is the detailed content of Detailed explanation of the use of react native's floating button component. For more information, please follow other related articles on the PHP Chinese website!