React Native悬浮按钮组件的示例代码

2019-11-19 14:03:38

字体：大中小

来源：转载

供稿：网友

React Native悬浮按钮组件：react-native-action-button，纯JS组件，支持安卓和IOS双平台，支持设置子按钮，支持自定义位置和样式和图标。

效果图

安装方法

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

因为用到了react-native-vector-icons图标组件，需要做下link。如果你项目中已经使用了react-native-vector-icons，那就不需要这步了。

示例代码

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

主要参数说明

ActionButton