天天看點

rn 元件和項目

1.一個文本語音播放元件:

使用手機系統自帶的tts功能合成語音的元件,可将輸入的文本轉為語音播放。

https://github.com/somonus/react-native-speech文本語音播放元件

可以是一個字元串或者一個對象,當是一個字元串時,則預設以中文播放目前字元串。如果是一個對象,則根據對象的key進行播放。對象包含的key有:

text: 需要播放的文本内容

language: 需要以哪種語言播放

2.按鈕特效 react-native-circle-button▼

項目名稱:react-native-circle-button功能介紹:可以支援雙平台的原型菜單按鈕,作者靈感來源于國外設計網站dribbble,雖然可能項目用到的可能性比較小,但是可以看下實作過程。倉庫位址:https://github.com/dwicao/react-native-circle-button

3.酷炫折疊動畫 react-native-foldview▼

項目名稱:react-native-foldview功能介紹:純 JS 代碼編寫的,一個帶折疊動畫的清單項 UI 元件,可用在滾動清單中,展示清單詳情之類的,動畫效果也不錯。

倉庫位址:https://github.com/jmurzy/react-native-foldview

4.方塊滾動輪播圖,類似産品塊cell展示,或者卡片式滑動

react-native-snap-carousel

5.這個是一個下拉選項元件

A react-native dropdown/picker/selector component for both Android & iOS.

國人做的,貌似不錯,支援個。

react-native-modal-dropdown

cnblog的中文解釋

6.一個比較美麗的提示氣泡toast

react-native-root-toast

screen-shoots

7.微信及朋友圈分享,微信支付: https://github.com/yorkie/react-native-wechat

8.QQ分享:https://github.com/reactnativecn/react-native-qq

9.微網誌分享: https://github.com/reactnativecn/react-native-weibo

10.圖檔上拉放大:https://github.com/lelandrichardson/react-native-parallax-view

11.原生視訊播放器:https://github.com/cornedor/react-native-video-player

12.倒計時:https://github.com/kkkelicheng/ReactNative-CountDownButton

優點: 不會因為進入背景而停止讀秒

支援同個頁面再次進入時,智能的判斷讀秒時間,顯示是否繼續計時

13.react-navigation的使用和變更:

使用介紹: http://www.jianshu.com/p/2f575cc35780

demo: https://github.com/pheromone/navigationDemo

在使用react-navigation中遇到幾個難點:

a. 跳至相應路由(如傳回首頁功能). http://www.jianshu.com/p/2f575cc35780

b. 防止點選過快,跳界面兩次. https://github.com/react-community/react-navigation/pull/1348/files

c. static中使用this. http://www.jianshu.com/p/2f575cc35780