摘要:聲明式用法只需使用動(dòng)畫(huà)的名稱(chēng),該動(dòng)畫(huà)將在加載該元素時(shí)立即生效。實(shí)際案例這個(gè)庫(kù)支持本地推送通知功能比較全面。實(shí)際案例具有縮放支持,回調(diào),縮放以適應(yīng)和滾動(dòng)指示器支持的組件。這是圖像上傳或圖像處理的基本庫(kù)。
本篇 React native 庫(kù)列表不是從網(wǎng)上隨便找的, 這些是我在我的應(yīng)用中親自使用的庫(kù)。 這些庫(kù)功能可能跟其它庫(kù)也有,但經(jīng)過(guò)大量研究并在我的程序中嘗試后,我選擇了這些庫(kù)。
想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你!
15. React Native Animatable這個(gè)庫(kù)非常適合快速地向 React Native 應(yīng)用程序添加簡(jiǎn)單的動(dòng)畫(huà)和轉(zhuǎn)換。這個(gè)庫(kù)有兩種使用方式:聲明式和命令式。
聲明式用法只需使用動(dòng)畫(huà)的名稱(chēng),該動(dòng)畫(huà)將在加載該元素時(shí)立即生效。打開(kāi)頁(yè)面時(shí),標(biāo)題應(yīng)該從左邊滑進(jìn)去。
如果你想手動(dòng)播放動(dòng)畫(huà),這個(gè)wgy命令式用法就很好用。當(dāng)有人喜歡某個(gè)帖子時(shí),搖動(dòng)一個(gè)心形圖標(biāo)。
你也可以定義你自己的動(dòng)畫(huà)!對(duì)于復(fù)雜的動(dòng)畫(huà),可以查找 React Native 的 Animated 的 API。
實(shí)際案例 14. React Native Push Notification這個(gè)庫(kù)支持本地推送通知功能比較全面。它具有日程通知、基于日、周、時(shí)間的重復(fù)通知等其他庫(kù)中沒(méi)有的功能。
如果你的應(yīng)用程序具有離線(xiàn)可用并且需要推送通知,則此庫(kù)是你的選擇。
13. React Native FCM如果你的應(yīng)用程序需要使用 GCM 或 FCM 從服務(wù)器發(fā)送遠(yuǎn)程通知,那么這個(gè)庫(kù)就你選擇之一,F(xiàn)CM 只是 GCM 的最新版本。
這個(gè)庫(kù)還支持帶有調(diào)度和重復(fù)支持的本地通知。因此,如果你同時(shí)需要遠(yuǎn)程和本地通知,那么可以使用 response-native-fcm
12.React Native Hyperlink一個(gè)簡(jiǎn)單的 react-native 超鏈接組件的可以讓 url,模糊鏈接,電子郵件等可點(diǎn)擊。它還支持樣式化鏈接。只要將 Text 組件作為子組件傳遞給 Hyperlink 組件,庫(kù)就會(huì)處理一切。
實(shí)際案例 11. React Native Sound你需要在應(yīng)用中播放聲音或音樂(lè)的庫(kù)。 我使用這個(gè)庫(kù)來(lái)播放應(yīng)用程序聲音并播放錄制的答案。
實(shí)際案例下面是React native應(yīng)用程序聲音的演示視頻:
https://youtu.be/DpE_8j-aq0I
10. React Native loading spinner overlay一個(gè)簡(jiǎn)單但非常有用的組件。當(dāng)你希望阻止用戶(hù)在處理某些內(nèi)容時(shí)執(zhí)行任何其他操作時(shí),你可以使用此組件。 通過(guò)在 Android 中處理后退按鈕,該組件也做得很好。 示例:提交帖子
9. React Native Progress在應(yīng)用程序中,顯示加載或任何其他操作的進(jìn)度是很重要的。這個(gè)庫(kù)通過(guò)支持5個(gè)不同的組件,如線(xiàn)性進(jìn)度條、圓形、餅狀圖等,可以很容易地顯示進(jìn)度。
實(shí)際案例 8. React Native SwiperReact Native swiper對(duì)于實(shí)現(xiàn)App intro,Image carousel和Image Galleries非常有用。
下面是React native swiper 的演示視頻:
https://www.youtube.com/watch...
7. React Native Share與UI自定義分享組件,它還支持分享文件。
實(shí)際案例 6. React Native Photo View具有縮放支持,onload 回調(diào),縮放以適應(yīng)和滾動(dòng)指示器支持的 Image 組件。 此組件存在高分辨率圖像問(wèn)題。 當(dāng)然,這不是React Native 的特定問(wèn)題。 當(dāng)存在高分辨率圖像時(shí),內(nèi)存問(wèn)題在 Android 上很常見(jiàn)。
5. React Native Image Picker這是圖像上傳或圖像處理的基本庫(kù)。 它支持從圖庫(kù)中選擇,從相機(jī)拍攝照片。 我喜歡這個(gè)庫(kù)中另一個(gè)有用的功能是選擇圖像分辨率的選項(xiàng),此功能解決了由于高分辨率圖像導(dǎo)致的內(nèi)存問(wèn)題。
4. React Native Simple Store這個(gè)庫(kù)只是 React Native 的內(nèi)置 AsyncStorage API的封裝,但它非常有用,因?yàn)樗哂蠵romises、l鏈?zhǔn)秸{(diào)用和超級(jí)簡(jiǎn)單的 API 等特性。
3. React Native Vector Icons這是最好的 Icon 組件。 它捆綁了 10 個(gè)圖標(biāo)集,圖標(biāo)按鈕組件,還允許你使用字形圖,F(xiàn)ontello 和 TTF 文件導(dǎo)入自定義圖標(biāo)集。
捆綁圖標(biāo)集:
Entypo by Daniel Bruce (411 icons)
EvilIcons by Alexander Madyankin & Roman Shamin (v1.8.0, 70 icons)
FontAwesome by Dave Gandy (v4.7.0, 675 icons)
Foundation by ZURB, Inc. (v3.0, 283 icons)
Ionicons by Ben Sperry (v3.0.0, 859 icons)
MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
MaterialCommunityIcons by MaterialDesignIcons.com (v2.0.46, 2046 icons)
Octicons by Github, Inc. (v5.0.1, 176 icons)
Zocial by Sam Collins (v1.0, 100 icons)
SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)
2. React Native Modalbox這個(gè) Modal 庫(kù)是基于 React Native 的 Modal組件構(gòu)建的,但附帶了許多自定義和功能。 它具有在應(yīng)用程序中使用 Modals 所需的所有功能。
實(shí)際案例 1. React Native Router Flux導(dǎo)航是 React Native 社區(qū)中的主要問(wèn)題之一,因?yàn)樗鼪](méi)有默認(rèn)導(dǎo)航系統(tǒng)。 無(wú)論 React Native 出現(xiàn)什么導(dǎo)航系統(tǒng)總是有變化或不穩(wěn)定。
這個(gè)庫(kù)幫助我使用一個(gè)非常簡(jiǎn)單的聲明性API快速實(shí)現(xiàn)導(dǎo)航。 它維護(hù)一堆路線(xiàn)并從應(yīng)用程序中的任何場(chǎng)景導(dǎo)航到任何場(chǎng)景就像調(diào)用函數(shù)一樣簡(jiǎn)單。
它也支持選項(xiàng)卡式導(dǎo)航,側(cè)邊欄和模態(tài)框。 可以將模態(tài)框定義為場(chǎng)景,以便可以從任何場(chǎng)景調(diào)用模態(tài)。
你可以已經(jīng)在用 React-Navigation 了,并想知道我為什么要使用 React Native Router Flux? 不要擔(dān)心 React Native Router flux v4 基于 React-Navigation 并且具有更簡(jiǎn)單的 API!
上面的大多數(shù)應(yīng)用程序演示都使用 React-native-router-Flux 作為導(dǎo)航系統(tǒng)。
總結(jié)如果你使用一個(gè)不在上面列表中的真棒React Native庫(kù),請(qǐng)?jiān)谙旅娴脑u(píng)論中告訴我!
你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力,歡迎點(diǎn)贊!
交流干貨系列文章匯總?cè)缦?,覺(jué)得不錯(cuò)點(diǎn)個(gè)Star,歡迎 加群 互相學(xué)習(xí)。
https://github.com/qq44924588...
我是小智,公眾號(hào)「大遷世界」作者,對(duì)前端技術(shù)保持學(xué)習(xí)愛(ài)好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨,在進(jìn)階的路上,共勉!
關(guān)注公眾號(hào),后臺(tái)回復(fù)福利,即可看到福利,你懂的。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/103554.html
摘要:寫(xiě)在前面一個(gè)好的缺不了好的三方支持,生活在這個(gè)活躍的開(kāi)源社區(qū),尋找合適的三方組件是一個(gè)開(kāi)發(fā)者最基本的能力。下面分享幾個(gè)我收集的三方模塊,希望對(duì)大家有點(diǎn)幫助。 寫(xiě)在前面 一個(gè)好的App缺不了好的三方支持,生活在ReactNative這個(gè)活躍的開(kāi)源社區(qū),尋找合適的三方組件是一個(gè)開(kāi)發(fā)者最基本的能力。不過(guò)不積跬步,無(wú)以至千里,不積小流,無(wú)以成江海。下面分享幾個(gè)我收集的三方模塊,希望對(duì)大家有點(diǎn)幫...
摘要:除此之外,部分頁(yè)面,其實(shí)完全可以由網(wǎng)頁(yè)去支持多端共用的功能,樓主親身遇到過(guò)的場(chǎng)景,就是圖表的繪制,我們的方案是一個(gè)頁(yè)面,需要微信,手機(jī)網(wǎng)頁(yè),和都具備該功能,而且我們手機(jī)網(wǎng)頁(yè)和客戶(hù)端打開(kāi)的稍微有區(qū)別,需要隱藏。 showImg(https://segmentfault.com/img/bVzxDW); 相信好多寫(xiě)React Native的都是前端出身,當(dāng)然遇見(jiàn)問(wèn)題的,也很多時(shí)候會(huì)想從前端...
摘要:周末是時(shí)隔兩月的家人團(tuán)聚,而每次內(nèi)容的準(zhǔn)備平均需要我集中精力工作小時(shí),所以第期的內(nèi)容今早才準(zhǔn)備好,對(duì)不住大家了。下面是本周精選內(nèi)容,請(qǐng)享用。本文作者王仕軍,商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。 showImg(https://segmentfault.com/img/remote/1460000009742537?w=1240&h=509); 周末是時(shí)隔兩月的家人團(tuán)聚,而...
閱讀 2820·2021-10-11 10:57
閱讀 2417·2021-08-27 16:20
閱讀 1395·2019-08-30 13:03
閱讀 1573·2019-08-30 12:50
閱讀 3352·2019-08-29 14:16
閱讀 1569·2019-08-29 11:12
閱讀 1622·2019-08-28 17:53
閱讀 2903·2019-08-27 10:58