譯者:前端小智
本篇 React native
庫列表不是從網上隨便找的, 這些是我在我的應用中親自使用的庫。 這些庫功能可能跟其它庫也有,但經過大量研究並在我的程式中嘗試後,我選擇了這些庫。
15. React Native Animatable

這個庫非常適合快速地向 React Native 應用程式新增簡單的動畫和轉換。這個庫有兩種使用方式:宣告式和命令式。
宣告式用法只需使用動畫的名稱,該動畫將在載入該元素時立即生效。開啟頁面時,標題應該從左邊滑進去。
如果你想手動播放動畫,這個wgy命令式用法就很好用。當有人喜歡某個帖子時,搖動一個心形圖示。
你也可以定義你自己的動畫!對於複雜的動畫,可以查詢 React Native 的 Animated 的 API。
實際案例

14. React Native Push Notification
這個庫支援本地推送通知功能比較全面。它具有日程通知、基於日、周、時間的重複通知等其他庫中沒有的功能。
如果你的應用程式具有離線可用並且需要推送通知,則此庫是你的選擇。
13. React Native FCM
如果你的應用程式需要使用 GCM 或 FCM 從伺服器傳送遠端通知,那麼這個庫就你選擇之一,FCM 只是 GCM 的最新版本。
這個庫還支援帶有排程和重複支援的本地通知。因此,如果你同時需要遠端和本地通知,那麼可以使用 response-native-fcm
12.React Native Hyperlink

一個簡單的 react-native 超連結元件的可以讓 url,模糊連結,電子郵件等可點選。它還支援樣式化連結。只要將 Text 元件作為子元件傳遞給 Hyperlink 元件,庫就會處理一切。
實際案例

11. React Native Sound
你需要在應用中播放聲音或音樂的庫。 我使用這個庫來播放應用程式聲音並播放錄製的答案。
實際案例
下面是React native應用程式聲音的演示視訊:
10. React Native loading spinner overlay

一個簡單但非常有用的元件。當你希望阻止使用者在處理某些內容時執行任何其他操作時,你可以使用此元件。 通過在 Android 中處理後退按鈕,該元件也做得很好。 示例:提交帖子
9. React Native Progress
在應用程式中,顯示載入或任何其他操作的進度是很重要的。這個庫通過支援5個不同的元件,如線性進度條、圓形、餅狀圖等,可以很容易地顯示進度。
實際案例

8. React Native Swiper
React Native swiper對於實現App intro,Image carousel和Image Galleries非常有用。
下面是React native swiper 的演示視訊:
7. React Native Share
與UI自定義分享元件,它還支援分享檔案。
實際案例

6. React Native Photo View
具有縮放支援,onload 回撥,縮放以適應和滾動指示器支援的 Image 元件。 此元件存在高解析度影象問題。 當然,這不是React Native 的特定問題。 當存在高解析度影象時,記憶體問題在 Android 上很常見。
5. React Native Image Picker
這是影象上傳或影象處理的基本庫。 它支援從相簿中選擇,從相機拍攝照片。 我喜歡這個庫中另一個有用的功能是選擇影象解析度的選項,此功能解決了由於高解析度影象導致的記憶體問題。

4. React Native Simple Store
這個庫只是 React Native 的內建 AsyncStorage API的封裝,但它非常有用,因為它具有Promises、l鏈式呼叫和超級簡單的 API 等特性。
3. React Native Vector Icons
這是最好的 Icon 元件。 它捆綁了 10 個圖示集,圖示按鈕元件,還允許你使用字形圖,Fontello 和 TTF 檔案匯入自定義圖示集。
捆綁圖示集:
- 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
這個 Modal 庫是基於 React Native 的 Modal元件構建的,但附帶了許多自定義和功能。 它具有在應用程式中使用 Modals 所需的所有功能。
實際案例

1. React Native Router Flux

導航是 React Native 社群中的主要問題之一,因為它沒有預設導航系統。 無論 React Native 出現什麼導航系統總是有變化或不穩定。
這個庫幫助我使用一個非常簡單的宣告性API快速實現導航。 它維護一堆路線並從應用程式中的任何場景導航到任何場景就像呼叫函式一樣簡單。
它也支援選項卡式導航,側邊欄和模態框。 可以將模態框定義為場景,以便可以從任何場景呼叫模態。
你可以已經在用 React-Navigation 了,並想知道我為什麼要使用 React Native Router Flux? 不要擔心 React Native Router flux v4 基於 React-Navigation 並且具有更簡單的 API!
上面的大多數應用程式演示都使用 React-native-router-Flux
作為導航系統。
總結
如果你使用一個不在上面列表中的真棒React Native庫,請在下面的評論中告訴我!
你的點贊是我持續分享好東西的動力,歡迎點贊!
歡迎加入前端大家庭,裡面會經常分享一些技術資源。
