React Native之资源集合

库是很多的,当然选择最常用的一些精选库

1.ES6语法

 

常用的难点语法解析:

http://www.ghugo.com/react-native-es6/

 

2.文件读写

目前看来只有一个库

https://github.com/johanneslumpe/react-native-fs

https://github.com/wkh237/react-native-fetch-blob

 

3.inputScrollView

在iOS中,ScrollView中包含input的时候,键盘可能会出现将input遮挡的情况

https://github.com/reactnativecn/react-native-inputscrollview

 

4.checkBox

https://github.com/sconxu/react-native-checkbox

 

5.radioButtons

https://github.com/ArnaudRinquin/react-native-radio-buttons

 

6.轮播类组件

https://github.com/leecade/react-native-swiper

 

7.显示HTML内容

https://github.com/jsdf/react-native-htmlview

 

8.全屏图片查看

https://github.com/oblador/react-native-lightbox

https://github.com/alwx/react-native-photo-view

https://github.com/ascoders/react-native-image-viewer

9.加密解密

MD5

https://github.com/pvorb/node-md5

 SHA

https://github.com/Caligatio/jsSHA

MD5/SHA/AES..集合

https://github.com/brix/crypto-js

 

10.二维码生成/扫描

生成

https://github.com/cssivision/react-native-qrcode

扫描

https://github.com/lazaronixon/react-native-qrcode-reader

 

11.ActivityIndicator

官方就有这个控件,但一直是感觉太没用了

PS:与android中的开发模式不一样,RN的加载框并不是说需要的时候,在最上层添加一个activity类似的视图

而是在布局里面已经写好了一个居中的View,通过属性来控制是否显示

https://github.com/maxs15/react-native-spinkit (Android项目中必须存在MainApplication文件,否则在link的时候会找不到)

另外,说一下隐藏和显示的用法,暂时不知道怎么通过state改变style中属性的值,但是在render中可以直接通过属性值来控制

{this.state.isLoading==true?
                <View style={{position:'absolute',top:0,bottom:0,left:0,right:0,justifyContent:'center',alignItems:'center'}}>
                    <TouchableOpacity onPress={this.changeLoading.bind(this)}>
                    <View style={{backgroundColor :'gray',alignItems:'center',padding:8,borderRadius :8}}>
                        <Spinner   size={80} type='Wave' color='white'/>
                        <Text style={{marginTop:8}}>加载中,请稍后...</Text>
                    </View>
                    </TouchableOpacity>
                 </View>
                :null}

 

12.拼音库

常用于首字母排序 /检索/分类等

https://github.com/breeswish/pinyinlite

https://github.com/hotoo/pinyin

 

实例:http://www.cnblogs.com/cbcye/p/5940502.html

 

13.Toast

https://github.com/magicismight/react-native-root-toast

 

14.折叠

https://github.com/oblador/react-native-collapsible

https://github.com/naoufal/react-native-accordion

 

15.媒体相关

声音播放:

https://github.com/zmxv/react-native-sound

 

16.actionSheet/Picker

当然,这两种使用的场景不同

https://github.com/beefe/react-native-actionsheet  (注意:这个库在安卓上有个数据无法动态刷新的bug,2.0.4有这个问题,最新版的2.0.6修复了该问题,问题编号#13)

 

17.基础库

http://underscorejs.org

里面推荐一个很方便的方法,比较两个对象的值是否相同(深度比较)_.isEqual(object, other) ,该库同样可以在npm中使用

 

18.键盘处理

https://github.com/Andr3wHur5t/react-native-keyboard-spacer

https://github.com/APSL/react-native-keyboard-aware-scroll-view

 

19.定时 重复任务

在新版本(好想是0.44开始),会出现下面的情况,大致的原因是,如果用setTimeout或者setInterval设置一个比较长的时间(譬如几分钟),就会出现下面的警告

https://github.com/facebook/react-native/issues/12981

解决办法:

 用下面的库替换JS的上面两个方法,下面的库在原生里面来实现了上面两个方法的相似功能

https://github.com/ocetnik/react-native-background-timer

 

20.文本输入TextInput

https://github.com/halilb/react-native-textinput-effects

底部文本输入框

https://github.com/wix/react-native-keyboard-input

https://github.com/wix/react-native-keyboard-tracking-view

 

21.截图/生成图片

将一个控件截图并保存到本地

https://github.com/gre/react-native-view-shot

 

22.switch

ios风格的switch

https://github.com/poberwong/react-native-switch-pro

posted @ 2016-08-31 23:16  做一个清醒者  阅读(1245)  评论(0编辑  收藏  举报