天天看点

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