库是很多的,当然选择最常用的一些精选库
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.基础库
里面推荐一个很方便的方法,比较两个对象的值是否相同(深度比较)_.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