由於其他的原因，對於React Native相關的內容最近沒有投入太多的關注，從去年年底出版了《React Native移動開發實戰》後，對於React Native的關注就比較少了。最近由於公司之前的專案需要，所以React Native又重新回到我的世界，並且，最近出去面試深深的感覺到原生開發的飽和，不管是Android還是iOS，移動市場基本已經飽和，而更多的公司和開發者開始轉向了前端，這對於移動開發人員，特別是有過跨平臺開發經驗或者小程式開發經驗的開發者來說，學習前端是異常的容易。因此，我後面的目光也主要放在跨平臺和大前端上。

對React Native發展歷史比較瞭解的同學都知道，React Native早期除了效能外，生態也是特別差的，但是在經過了2017年的優化和發展之後，現在跨平臺開發如React Native和Weex可以說是相當的吃香。並且，隨著跨平臺生態的逐漸形成，跨平臺的元件和文章也越來越多。

今天給大家講的是一個可以實現懸浮效果的元件，效果如下：

安裝

在專案中使用如下的命令安裝react-native-action-button庫：

npm i react-native-action-button --save

因為用到了react-native-vector-icons圖示元件，需要還需要做下link，命令如下：

react-native link react-native-vector-icons

或者使用下面的命令執行link。

react-native link

使用例項

首先匯入該。

import ActionButton from
 
 'react-native-action-button';

例如下面是一個具體的例項程式碼：

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';


class App extends Component {

  render() {
    return
 
 (
      <View style={{flex:1, backgroundColor: '#f3f3f3'}}>
        {/* Rest of the app comes ABOVE the action button component !*/}
        <ActionButton buttonColor="rgba(231,76,60,1)">
          <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
            <Icon name="md-create" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
            <Icon name="md-notifications-off" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
            <Icon name="md-done-all" style={styles.actionButtonIcon} />
          </ActionButton.Item>
        </ActionButton>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white',
  },
});

其中，ActionButton元件是一個容器元件，即我們上面看到的“+”元件，而ActionButton.Item元件則是子元件。這有點類似於Android的RadioGrop和RadioButton的關係。

引數說明

ActionButton

• size：按鈕的大小，預設為56
• active：是否顯示按鈕
• position：按鈕的位置，可以為left center right
• offsetX：X軸上的偏移位置
• offsetY：Y軸上的偏移位置
• onPress：點選事件
• onLongPress：長按事件
• buttonText：按鈕標題
• verticalOrientation：彈出按鈕的方向，up 或者 down
• renderIcon：可以自定義按鈕顯示的樣式，預設是一個加號

ActionButton.Item

• size：按鈕的大小，預設為56
• title：按鈕標題
• buttonColor：按鈕顏色
• onPress：點選事件

當然除了上面介紹的一些常用屬性外，react-native-action-button還有一些其他的屬性，大家可以通過官方資料來學習。