react-native-storage 是封装好的数据存储组件，安装方法见： https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md
首先导入组件 import Storage from 'react-native-storage'
创建一个全局的 Storage ：
注意 storage.sync 的设置放在了创建方法的外面，是因为 RNAsyncStorage_asyn 文件中使用了 storage ，（如果放在创建方法里面， RNAsyncStorage_asyn 中的 storage 将因为尚未导出 storage 而出现错误）
这里解释下 syncInBackground -----为ture的时候：如果数据过期，在调用 sync 方法的同时先返回已经过期的数据，但 sync 方法结束后不会调用 promise 返回新的数据。为false的时候，会等待等待 sync 方法 promise 返回最新数据
这里的 http://localhost:8010/birds/storage 是一个本地连接，将返回一个json数据，数据格式为 {"name":"B","age":18,"tags":["geek1","nerd1","otaku1"]}
上面设置了过期时间为6秒，6秒之后数据过期，将会自动调用RNAsyncStorage_asyn文件中的方法，然后返回一个新的数据为请求过来的json，并保存起来
作者整理的一套常用的React Native开发中使用到的三方组件库大全，后续也会持续更新，同学们如果发现有好用的组件但是文章中没有列出的，也请给作者留言告知组件名称，作者好将读者们反馈的组件添加到文章中，以便帮助更多的RN开发者。后续持续更新的三方组件会放到文章的开头部分，代表是新追加的组件，小伙伴们请知晓！
如果小伙伴们想学习React Native 框架的搭建以及Redux框架的学习使用，可以参考作者的开源项目OneM: https://github.com/guangqiang-liu/OneM 记得给个 star 哦
当然也欢迎小伙伴们加入作者的React Native实战开发QQ交流群: 620792950 , 开发中遇到的问题可以在群里随意的提问，互相交流学习。
https://github.com/fangwei716/30-days-of-react-native
此组件目前只支持ES5 语法，ES6语法请在componentWillUnmount() 中清除timer
https://github.com/reactjs/react-timer-mixin
https://github.com/ant-design/ant-design-mobile
https://github.com/ide/react-native-button
https://github.com/ascoders/react-native-image-viewer
https://github.com/oblador/react-native-progress
[图片上传失败...(image-8658f8-1511425885032)]
https://github.com/aksonov/react-native-router-flux
https://github.com/jasonmerino/react-native-simple-store
https://github.com/happypancake/react-native-tab-navigator
https://github.com/oblador/react-native-vector-icons
https://github.com/race604/react-native-viewpager
https://github.com/react-community/react-navigation
https://github.com/oblador/react-native-animatable
https://github.com/nick/react-native-carousel
https://github.com/buhe/react-native-countdown
react-native-device-info
https://github.com/rebeccahughes/react-native-device-info
react-native-fileupload
https://github.com/PhilippKrone/react-native-fileupload
https://github.com/corymsmith/react-native-icons
https://github.com/oblador/react-native-vector-icons
react-native-image-picker
https://github.com/react-community/react-native-image-picker
react-native-keychain
https://github.com/oblador/react-native-keychain
react-native-picker
https://github.com/beefe/react-native-picker
[图片上传失败...(image-689a68-1511950421120)]
react-native-picker-Android
https://github.com/beefe/react-native-picker-android
react-native-refreshable-listview
https://github.com/jsdf/react-native-refreshable-listview
react-native-scrollable-tab-view
https://github.com/skv-headless/react-native-scrollable-tab-view
react-native-side-menu
https://github.com/react-native-community/react-native-side-menu
react-native-swiper
https://github.com/leecade/react-native-swiper
react-native-video
https://github.com/react-native-community/react-native-video
react-native-viewpager
https://github.com/race604/react-native-viewpager
react-native-scrollable-tab-view
https://github.com/skv-headless/react-native-scrollable-tab-view
react-native-tab-navigator
https://github.com/happypancake/react-native-tab-navigator
react-native-check-box
https://github.com/crazycodeboy/react-native-check-box
react-native-splash-screen
https://github.com/crazycodeboy/react-native-splash-screen
react-native-simple-router
https://github.com/react-native-simple-router-community/react-native-simple-router
react-native-storage
https://github.com/sunnylqm/react-native-storage
react-native-sortable-listview
https://github.com/deanmcpherson/react-native-sortable-listview
react-native-htmlview
https://github.com/jsdf/react-native-htmlview
react-native-easy-toast
https://github.com/crazycodeboy/react-native-easy-toast
https://github.com/xinthink/react-native-material-kit
http://nativebase.io/docs/v0.4.6/components#anatomy
https://github.com/GeekyAnts/NativeBase
https://github.com/mastermoo/react-native-action-button
https://github.com/ide/react-native-button
https://github.com/gcanti/tcomb-form-native
https://github.com/FaridSafi/react-native-gifted-form
https://github.com/bartonhammond/snowflake
https://github.com/halilb/react-native-textinput-effects
https://github.com/zbtang/React-Native-TextInputLayout
https://github.com/FaridSafi/react-native-gifted-chat
https://github.com/lelandrichardson/react-native-maps
https://github.com/oblador/react-native-animatable
https://github.com/maxs15/react-native-spinkit
https://github.com/root-two/react-native-drawer
https://github.com/dancormier/react-native-swipeout
https://github.com/jemise111/react-native-swipe-list-view
https://github.com/tomauty/react-native-chart
https://github.com/lelandrichardson/react-native-parallax-view
https://github.com/cqm1994617/react-native-myCalendar
https://github.com/joshswan/react-native-globalize
https://github.com/hinet/react-native-checkboxlist
https://github.com/sconxu/react-native-checkbox
https://github.com/ideacreation/react-native-barcodescanner
https://github.com/frostney/react-native-create-library
https://github.com/MisterAlex95/react-native-record-sound
https://github.com/bosung90/react-native-audio-android
https://github.com/KBLNY/react-native-message-bar
https://github.com/aksonov/react-native-tableview
https://github.com/jeanregisser/react-native-popover
https://github.com/instea/react-native-popup-menu
https://github.com/madriska/react-native-quick-actions
https://github.com/beefe/react-native-actionsheet
https://github.com/ldn0x7dc/react-native-gallery
https://github.com/wix/react-native-keyboard-aware-scrollview
https://github.com/reactnativecn/react-native-inputscrollview
https://github.com/sunnylqm/react-native-storage
https://github.com/djchie/react-native-star-rating
https://github.com/joshswan/react-native-globalize
https://github.com/lazaronixon/react-native-qrcode-reader
https://github.com/rt2zz/react-native-contacts
https://www.npmjs.com/package/crypto-js
https://github.com/reactnativecn/react-native-http-cache
https://github.com/sghiassy/react-native-sglistview
https://github.com/xfumihiro/react-native-image-to-base64
https://github.com/mehcode/rn-splash-screen
https://github.com/remobile/react-native-marquee-label
https://github.com/beefe/react-native-textinput
https://github.com/alinz/react-native-webview-bridge
https://github.com/yamill/react-native-orientation
https://github.com/cnjon/react-native-pdf-view
https://github.com/rebeccahughes/react-native-device-info
https://github.com/kiddkai/react-native-gestures
https://github.com/johanneslumpe/react-native-gesture-recognizers
https://github.com/FaridSafi/react-native-gifted-listview
https://github.com/jsdf/react-native-refreshable-listview
https://github.com/greatbsky/react-native-pull/wiki
https://github.com/alinz/react-native-dropdown
https://github.com/oblador/react-native-lightbox
https://github.com/marcshilling/react-native-image-picker
https://github.com/ivpusic/react-native-image-crop-picker
https://github.com/oblador/react-native-image-progress
https://github.com/race604/react-native-viewpager
https://github.com/FuYaoDe/react-native-app-intro
https://github.com/appintheair/react-native-looped-carousel
https://github.com/leecade/react-native-swiper
https://github.com/maxs15/react-native-modalbox
https://github.com/brentvatne/react-native-modal
https://github.com/bodyflex/react-native-simple-modal
https://github.com/react-native-fellowship/react-native-blur
https://github.com/oblador/react-native-vector-icons
https://github.com/skv-headless/react-native-scrollable-tab-view
https://github.com/aroth/react-native-uploader
https://github.com/oblador/react-native-animatable
https://github.com/oblador/react-native-vector-icons
https://github.com/ivpusic/react-native-image-crop-picker
https://github.com/beefe/react-native-picker
https://github.com/jsdf/react-native-refreshable-listview
[图片上传失败...(image-86b334-1511425885032)]
https://github.com/skv-headless/react-native-scrollable-tab-view
https://github.com/react-native-community/react-native-side-menu
https://github.com/leecade/react-native-swiper
https://github.com/crazycodeboy/react-native-check-box
https://github.com/crazycodeboy/react-native-easy-toast
https://github.com/xinthink/react-native-material-kit
https://github.com/GeekyAnts/NativeBase
https://github.com/mastermoo/react-native-action-button
https://github.com/halilb/react-native-textinput-effects
https://github.com/zbtang/React-Native-TextInputLayout
https://github.com/FaridSafi/react-native-gifted-chat
https://github.com/lovebing/react-native-baidu-map
http://www.jianshu.com/p/eceb7e66fa5e
https://github.com/maxs15/react-native-spinkit
https://github.com/dancormier/react-native-swipeout
https://github.com/jemise111/react-native-swipe-list-view
https://github.com/wuxudong/react-native-charts-wrapper
https://github.com/lelandrichardson/react-native-parallax-view
[图片上传失败...(image-9dccb8-1511425885033)]
https://github.com/cqm1994617/react-native-myCalendar
https://github.com/KBLNY/react-native-message-bar
https://github.com/jeanregisser/react-native-popover
https://github.com/madriska/react-native-quick-actions
https://github.com/beefe/react-native-actionsheet
https://github.com/oblador/react-native-image-progress
https://github.com/maxs15/react-native-modalbox
https://github.com/bodyflex/react-native-simple-modal
https://github.com/react-native-community/react-native-blur
React.native是目前唯一靠谱有前途的移动跨平台解决方案。
搞移动跨平台，解决方案已经有过很多了。Xamarin, Cordova, 基于webView的PhoneGap, 还有一大票各种创业公司的方案。它们都很垃圾。原因很简单：为达成“一次编写到处运行”的目的，这些方案不得不对两个主要平台（iOS和Android）的SDK做进一步的抽象，这意味着它们只能兼容两个平台共有的组件，结果就是写出来的app只能做到最平庸的用户体验。特别是微软的Xamarin，连自家的Windows Phone都搞不好，还给Apple和Google的SDK做包装，那能好么？基于Web的方案就更不用说了，本质就是拿HTML套个壳外加一些原生写的插件。
React.native的高明之处在于：它并不追求一次编写到处运行，它放弃了全部代码跨平台这一不切实际的目标。RN的目标很实际：用同一门语言（Javascript），同样的高层架构（Virtual DOM）和设计模式（component-based），针对不同平台分别作出最佳的用户体验。这也就是RN中“native”一词的含义。
在实际开发中，要做到最佳用户体验，针对iOS和Android应该要分别编写UI代码的。实际上RN也鼓励这么做。Android是Android，iOS是iOS，web是web，三者有不同的界面语言和用户习惯，凭什么要一样呢？但除却UI，业务逻辑、data object、web call等等却是可以一样的。再加上采用了同一门语言和设计模式，RN在生产力上非常有竞争力。从另一方面看，Flux设计模式反过来也被原生开发社区接受，Redux库在Java和Swift上都有翻版原生实现，所以你不一定要用RN写app，但你还是可以借鉴采用React的设计模式。React项目对于整个开发社区的影响很正面，比PhoneGap这种催生了一大票廉价app码农的垃圾技术正面多了。
另外，纯Javascript的开源库也可以直接应用到ReactJS／ReactNative中，这也进一步提升了生产力。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）