React Native懸浮按鈕組件的示例代碼
更新時間：2018年04月05日 09:52:12 作者：forrest23
本篇文章主要介紹了React Native懸浮按鈕組件的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
React Native懸浮按鈕組件：react-native-action-button，純JS組件，支持安卓和IOS雙平臺，支持設(shè)置子按鈕，支持自定義位置和樣式和圖標。
效果圖
安裝方法
npm i react-native-action-button --save react-native link react-native-vector-icons
因為用到了react-native-vector-icons圖標組件，需要做下link。如果你項目中已經(jīng)使用了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>
主要參數(shù)說明
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：點擊事件
完整示例
完整代碼：GitHub - forrest23/ReactNativeComponents: React Native組件大全
本次示例代碼在 Component10文件夾中。
組件地址
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
高階組件就是接受一個組件作為參數(shù)并返回一個新組件（功能增強的組件）的函數(shù)。這里需要注意高階組件是一個函數(shù)，并不是組件，這一點一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧2022-12-12
這篇文章主要介紹了React Native 通告消息豎向輪播組件的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
本篇文章主要介紹了詳解基于webpack搭建react運行環(huán)境，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要給大家介紹了關(guān)于React Native自定義組件與輸出方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要介紹了react hooks實現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進行綁定，節(jié)后實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了React初始化渲染過程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要給大家介紹了React三種避免子組件無效刷新的解決方案,使用React.memo,使用React.useMemo或React.useCallback,將子組件作為children來傳遞這三種方案,文章通過代碼介紹的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了React組件間傳值及跨組件通信的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
這篇文章主要為大家詳細介紹了如何使用React實現(xiàn)圖片縮放的功能,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴可以了解下2023-10-10
這篇文章主要介紹了React?路由使用,使用路由時需要為組件指定一個路由的path，最終會以path為基礎(chǔ)，進行頁面的跳轉(zhuǎn)，具體使用先看個簡單示例，該示例比較簡單就是兩個Tab頁面的來回切換2022-05-05