react native floating button component graphic tutorial

This time I will bring you the react native floating button group picture and text tutorial, what are the precautions when using the react native floating button component, the following is a practical case, let's go together take a look.

Rendering

Installation method

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

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

Component address

Detailed explanation of using webpack hot module replacement

JS crawling page scroll bar

Detailed explanation of the use of three types of $() in jQuery

Summary of JS sorting algorithm

The above is the detailed content of react native floating button component graphic tutorial. For more information, please follow other related articles on the PHP Chinese website!