ReactNative开发常用的三方模块

Alejandra34 5年前
   <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>