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 absolute',top:0,bottom:0,left:0,right:0,justifyContent:'center',alignItems:'center'}}>
                    <TouchableOpacity onPress={this.changeLoading.bind(this)}>
                    <View 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