Home > Article > Web Front-end > Applying React Native floating button component in practical cases (with code)
This time I will bring you the application of the React Native floating button component (with code) in a practical case. What are the precautions for applying the React Native floating button component in a practical case? The following is a practical case, let's take a look.
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 required.
Sample code
<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>
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: You can customize the style of button display , 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!
Recommended reading:
Detailed explanation of BubbleTransition practical case
Vue animate makes transition animation in the project
The above is the detailed content of Applying React Native floating button component in practical cases (with code). For more information, please follow other related articles on the PHP Chinese website!