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