ReactNative开发常用的三方模块
Alejandra34
8年前
<h2>写在前面</h2> <p>一个好的App缺不了好的三方支持，生活在ReactNative这个活跃的开源社区，寻找合适的三方组件是一个开发者最基本的能力。不过不积跬步，无以至千里，不积小流，无以成江海。下面分享几个我收集的三方模块，希望对大家有点帮助。</p> <h2>文件上传 react-native-uploader</h2> <p><img src="https://simg.open-open.com/show/675364524158cc6f04e058c8c1b59a57.gif"></p> <p>github地址： <a href="/misc/goto?guid=4959746336712209074" rel="nofollow,noindex">https://github.com/aroth/reac...</a></p> <p>评价：支持多图上传和上传进度显示，demo比较粗糙。项目已经停止更新 4个月</p> <p><!--more--></p> <h2>毛玻璃效果 react-native-blur</h2> <p><img src="https://simg.open-open.com/show/8885e6371c68491b579b309460bb5419.gif"></p> <p>github 地址： <a href="/misc/goto?guid=4959746336812500951" rel="nofollow,noindex">https://github.com/react-nati...</a></p> <p>评价：星星比较多，支持3种常见的毛玻璃效果，不错的组件。</p> <h2>图片轮播</h2> <ul> <li> <p>react-native-viewpager</p> </li> </ul> <p><img src="https://simg.open-open.com/show/845a7e05ca82b775b916ad8df5a4dbcd.gif"> GitHub 地址： <a href="/misc/goto?guid=4959746336903704878" rel="nofollow,noindex">https://github.com/race604/re...</a></p> <p>评价：实际使用过，轮播效果比较普通，算比较实用吧</p> <ul> <li> <p>react-native-looped-carousel</p> </li> </ul> <p><img src="https://simg.open-open.com/show/a3dc63178c26ef6a86550d16bd56e063.gif"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746336986429248" rel="nofollow,noindex">https://github.com/appintheai...</a></p> <p>评价：demo比较精致，可以尝试</p> <ul> <li> <p>react-native-app-intro</p> </li> </ul> <p><img src="https://simg.open-open.com/show/cda56ed5b9e5b20abd403bf8a4544751.gif"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746337083786706" rel="nofollow,noindex">https://github.com/FuYaoDe/re...</a></p> <p>评价：星星比较多，适合做App进入的引导页</p> <h2>图片选择</h2> <ul> <li> <p>react-native-image-picker</p> </li> </ul> <p><img src="https://simg.open-open.com/show/2f650c4052458d97203a16e7e6acb188.jpg"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959649512613480276" rel="nofollow,noindex">https://github.com/marcshilli...</a></p> <p>评价：实际使用过，功能强大，兼容性好。但是不支持多图</p> <ul> <li> <p>react-native-image-crop-picker</p> </li> </ul> <p><img src="https://simg.open-open.com/show/60885f4cb9ecac4c49bad57bf86c63c6.png"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746337201109168" rel="nofollow,noindex">https://github.com/ivpusic/re...</a></p> <p>评价：功能类似，但支持多图</p> <h2>获取设备信息 react-native-device-info</h2> <p>GitHub 地址： <a href="/misc/goto?guid=4959746337282127862" rel="nofollow,noindex">https://github.com/rebeccahug...</a></p> <p>评价：文档比较细致，算是靠谱的组件</p> <h2>ListView优化替代组件 react-native-sglistview</h2> <p>GitHub 地址： <a href="/misc/goto?guid=4959672957689396053" rel="nofollow,noindex">https://github.com/sghiassy/r...</a></p> <p>评价：用法简单，可以减小ListView运行占用的内存</p> <h2>二维码识别 react-native-qrcode-reader</h2> <p>github 地址： <a href="/misc/goto?guid=4959746337396841830" rel="nofollow,noindex">https://github.com/starknx/re...</a></p> <p>评价：比较实用的功能</p> <h2>手势解锁 react-native-gesture-password</h2> <p><img src="https://simg.open-open.com/show/c74d6d66423a8f5ac7193ff5fac39269.gif"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746337484613859" rel="nofollow,noindex">https://github.com/SunflowerG...</a></p> <p>评价：为App添彩的功能</p> <p><img src="https://simg.open-open.com/show/b472d52e375a18325dd53e94d3f7ce44.png"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746337396841830" rel="nofollow,noindex">https://github.com/starknx/re...</a></p> <p>评价： 星星比较少，项目1年未更新，谨慎使用</p> <h2>键盘遮挡问题解决</h2> <p>评价：新版RN的 KeyboardAvoidingView 组件可以解决这个问题</p> <h2>图片查看 react-native-gallery</h2> <p><img src="https://simg.open-open.com/show/649b57fef6173daea5bd0c2af2ad04a1.gif"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746337581587407" rel="nofollow,noindex">https://github.com/ldn0x7dc/r...</a></p> <p>评价：支持轮播和 放大查看</p> <h2>3D Touch react-native-quick-actions</h2> <p><img src="https://simg.open-open.com/show/f3c318b24b21817708100c60288ef7c1.png"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746337671971046" rel="nofollow,noindex">https://github.com/madriska/r...</a></p> <p>评价：为App添彩的功能，但不是必须的</p> <h2>可滑动的日历组件 react-native-myCalendar</h2> <p><img src="https://simg.open-open.com/show/152785e1d18960ffef1d646a64a898ba.gif"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746337751704942" rel="nofollow,noindex">https://github.com/cqm1994617...</a></p> <p>评价：demo 耦合性略高</p> <h2>可拖拽元素 react-native-gesture-recognizers</h2> <p><img src="https://simg.open-open.com/show/4accc5d49e89fa1f611fcd13ec1a6771.gif"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746337833470343" rel="nofollow,noindex">https://github.com/johanneslu...</a></p> <p>评价：比较有趣的功能</p> <h2>下拉放大 react-native-parallax-view</h2> <p><img src="https://simg.open-open.com/show/666f1e4e499d367b8177cac6065bc76c.gif"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746337923387176" rel="nofollow,noindex">https://github.com/lelandrich...</a></p> <p>评价：这个功能适合带图片的详情页</p> <h2>简单图表 react-native-chart</h2> <p><img src="https://simg.open-open.com/show/065560feb457a02b3c7ee521b4efa7a7.png"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746338020751653" rel="nofollow,noindex">https://github.com/tomauty/re...</a></p> <p>评价：比较成熟的项目，放心使用</p> <h2>侧滑按钮 react-native-swipeout</h2> <p><img src="https://simg.open-open.com/show/cd9efe72b45a45368b6f3d8ccafb2edb.gif"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746338106424417" rel="nofollow,noindex">https://github.com/dancormier...</a></p> <p>评价：如果放在水平滚动的容器里会有BUG</p> <h2>抽屉功能 react-native-drawer</h2> <p><img src="https://simg.open-open.com/show/5db1fcff7063cac2ff10f55e7ef75f98.gif"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746338188759659" rel="nofollow,noindex">https://github.com/root-two/r...</a></p> <p>评价：实际使用过，性能还不错，可放心使用</p> <h2>加载动画 react-native-spinkit</h2> <p><img src="https://simg.open-open.com/show/c5216919abb3e85bd993c928322a272e.gif"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746338272475212" rel="nofollow,noindex">https://github.com/maxs15/rea...</a></p> <p>评价：比较有趣的动画，为项目添彩</p> <h2>登录动画 react-native-login</h2> <p><img src="https://simg.open-open.com/show/50c5bb0cebe4c1ebcdb0a04c3e571201.gif"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746338352023535" rel="nofollow,noindex">https://github.com/brentvatne...</a></p> <p>评价：动画为mp4格式</p> <h2>动画组件 react-native-animatable</h2> <p><img src="https://simg.open-open.com/show/94738cbb42b8da73c6aeb7b31bdcdf5f.gif"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746338451379729" rel="nofollow,noindex">https://github.com/oblador/re...</a></p> <p>评价：为元素添加灵动感，比较实用</p> <h2>即时通讯</h2> <ul> <li> <p>react-native-gifted-chat</p> </li> </ul> <p><img src="https://simg.open-open.com/show/93c4226e17e1134adf5f0c815a7513e8.png"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746338535388299" rel="nofollow,noindex">https://github.com/FaridSafi/...</a></p> <p>评价：支持发送位置和图片</p> <ul> <li> <p>react-native-imUI</p> </li> </ul> <p><img src="https://simg.open-open.com/show/bedfb04fc2f54418b314a3decdef236d.png"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746338617747220" rel="nofollow,noindex">https://github.com/Ice-MT/rea...</a></p> <p>评价：从项目里抽取出来的demo，UI做的挺萌，有发送语音功能</p> <h2>精致的输入框 react-native-textinput-effects</h2> <p><img src="https://simg.open-open.com/show/f747fcd235be30d1d02395486e0f4136.gif"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746338699980864" rel="nofollow,noindex">https://github.com/halilb/rea...</a></p> <p>评价：为项目添彩的功能</p> <h2>表单验证 react-native-gifted-form</h2> <p><img src="https://simg.open-open.com/show/4344f644e0f676b07eb64dbf4c86da64.gif"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959746338779966438" rel="nofollow,noindex">https://github.com/FaridSafi/...</a></p> <p>评价：比较实用，适合用在复杂的表单</p> <h2>UI组件库</h2> <ul> <li> <p>NativeBase</p> </li> </ul> <p><img src="https://simg.open-open.com/show/74cc45c7c65b1824ba3a7c6bc5caac33.gif"></p> <p>github： <a href="/misc/goto?guid=4959746338869748606" rel="nofollow,noindex">https://github.com/GeekyAnts/...</a></p> <p>在线文档： <a href="/misc/goto?guid=4959746338953150236" rel="nofollow,noindex">http://nativebase.io/docs/v0....</a></p> <p>评价：组件比较多，不过设计风格一般</p> <ul> <li> <p>shoutem</p> </li> </ul> <p><img src="https://simg.open-open.com/show/683e009790946fb6042a1bec0f6725d3.jpg"></p> <p>团队github: <a href="/misc/goto?guid=4959746339045491547" rel="nofollow,noindex">https://github.com/shoutem</a></p> <p>在线文档： <a href="/misc/goto?guid=4959746339129602400" rel="nofollow,noindex">http://shoutem.github.io/docs...</a></p> <p>评价：组件丰富，设计风格酷炫、团队也比较牛逼</p> <ul> <li> <p>Teaset</p> </li> </ul> <p><img src="https://simg.open-open.com/show/697916e92c8ba2329fe2823799ae4977.png"></p> <p>github: <a href="/misc/goto?guid=4959746339212795961" rel="nofollow,noindex">https://github.com/rilyu/teaset</a></p> <p>评价：国人作品，组件丰富，设计风格简约，比较适宜新手实用吧</p> <ul> <li> <p>react-native-material-design</p> </li> </ul> <p><img src="https://simg.open-open.com/show/8e61bec9563fe9ba2e84cf31c6419cfe.jpg"></p> <p>GitHub 地址： <a href="/misc/goto?guid=4959657494989754895" rel="nofollow,noindex">https://github.com/react-nati...</a></p> <p>评价：纯js编写，没有依赖，demo用的是Android</p> <ul> <li> <p>react-native-elements</p> </li> </ul> <p><img src="https://simg.open-open.com/show/a445c15a91cf21acf2b13cebfe8866c6.png"></p> <p>github: <a href="/misc/goto?guid=4959657494989754895" rel="nofollow,noindex">https://github.com/react-nati...</a></p> <p>在线文档： <a href="/misc/goto?guid=4959657495218661824" rel="nofollow,noindex">http://react-native-material-...</a></p> <p>评价：ReactNative作者操刀领导的作品，值得拥有</p> <ul> <li> <p>react-native-ui-kitten</p> </li> </ul> <p><img src="https://simg.open-open.com/show/1bec267650e594b4ef773800e1411ee9.gif"></p> <p>github: <a href="/misc/goto?guid=4959746339363365173" rel="nofollow,noindex">https://github.com/akveo/reac...</a></p> <p>在线文档： <a href="/misc/goto?guid=4959746339448276598" rel="nofollow,noindex">https://akveo.github.io/react...</a></p> <p>评价：一个酷炫简单的App组件Demo，适合新手学习</p> <p>@参考： <a href="/misc/goto?guid=4959746339540205243" rel="nofollow,noindex">React Native 项目常用第三方组件汇总</a></p> <p>欢迎关注我的个人博客 <a href="/misc/goto?guid=4959746339618829567" rel="nofollow,noindex">Jafeney</a></p> <p> </p> <p>来自：https://segmentfault.com/a/1190000008878128</p> <p> </p>