大家在开发React项目的时候，选择一款合适且功能丰富的UI组件库，可以快速提升项目开发效率。目前，网上也有不少开源的React UI组件库，今天，就给大家推荐7个热门的React手机端UI组件库。

1、Material-UI

material-ui | 基于 Google Material Design 设计规范的 React 组件库，开箱即用，使用它可以快速搭建出赏心悦目的应用界面。

https://material-ui.com/

https://github.com/mui-org/material-ui

安装

$ npm i @material-ui/core -S

使用

// 引入组件import React from "react";import ReactDOM from "react-dom";import Button from "@material-ui/core/Button";return (      Hello World  );

2、Ant Design Mobile

antd-mobile | 支付宝团队出品的基于 Preact / React / React Native 移动端UI组件库。

目前在支付宝、蚂蚁金服等多个阿里项目中投入使用。组件质量非常高、上手简单、开箱即用。包括阿里推出的支付宝小程序也是这一套设计风格。

https://mobile.ant.design/

https://github.com/ant-design/ant-design-mobile/

https://mobile.ant.design/kitchen-sink/

安装

$ npm i antd-mobile -S

使用

// 引入组件import React from "react";import ReactDOM from "react-dom";import { Button } from 'antd-mobile';import 'antd-mobile/dist/antd-mobile.css'; return (  Antd Mobile);

3、Pile UI

pile.js | 滴滴团队基于 React 的移动端开发组件库。 组件丰富、轻量、易用，包含 50多 个交互功能，支持多语言与自定义皮肤。可以非常轻松的创建用户交互界面，让前端开发更专注于业务逻辑的实现。

https://didi.github.io/pile.js/docs/#/pile.js/components/introduce

https://github.com/didi/pile.js

https://didi.github.io/pile.js/

安装

$ npm i pile-ui@latest -S$ npm i @pile-ui/theme-default

使用

// 引入组件import React from "react";import ReactDOM from "react-dom";import { Button } from 'pile-ui';import '@pile-ui/theme-default/lib/index.min.css';// 单个组件引用方式 (推荐使用，节省无用组件调用)import Button from '@pile-ui/button';import '@pile-ui/theme-default/lib/button.min.css';return (  Hello Pile);

4、React WeUI

react-weui | 微信团队出品的基于 React / WeUI 的 移动端 UI 组件库。

https://weui.github.io/react-weui/docs/

https://github.com/weui/react-weui

https://weui.github.io/react-weui/

安装

$ npm i weui@1.1.0 react-weui -S

使用

// 引入组件import React from 'react';import ReactDOM from 'react-dom';import { Button } from 'react-weui';//import stylesimport 'weui';import 'react-weui/build/packages/react-weui.css';const App = () => Hello WeUI;ReactDOM.render((  ), document.getElementById('container'));

5、ReactStrap

reactstrap | 基于 Bootstrap 4 的无状态 React 组件库。

https://reactstrap.github.io/

https://github.com/reactstrap/reactstrap

安装

$ npm i reactstrap -S

使用

// 引入组件import React from 'react';import ReactDOM from 'react-dom';import { Button } from 'reactstrap';import 'bootstrap/dist/css/bootstrap.min.css';export default (props) => {  return (    Danger!  );};

6、Onsen UI

onsen-ui | 专为移动应用程序设计的丰富UI组件应用程序框架，集成丰富的组件功能。

Onsen UI还可以用于与当下流行框架(如 Vue.js、AngularJS 1、Angular 2+和React)更紧密地集成

https://onsen.io/react/

https://github.com/OnsenUI/OnsenUI

https://onsenui.github.io/react-onsenui-kitchensink/

安装

$ npm i onsenui react-onsenui -S

使用

// 引入组件import React from 'react';import ReactDOM from 'react-dom';import { Page, Toolbar, Button } from 'react-onsenui';import 'onsenui/css/onsenui.css';import 'onsenui/css/onsen-css-components.css';// 或者 Import everything and use it as 'Ons.Page', 'Ons.Button'// import * as Ons from 'react-onsenui';export default (props) => {  return (    Hello OnsenUI  );    //return (  //    //Tap me!  );};

7、Bee Mobile

bee mobile | 基于 React 的移动端组件库。拥有50多个组件，已为你需要在项目中使用的很多功能性组件做好准备。

https://bee-mobiles.github.io

https://github.com/IronPans/bee-mobile

https://bee-mobiles.github.io/#/components/

安装

npm i bee-mobile -S

使用

// 引入组件import React from 'react';import ReactDOM from 'react-dom';import { Button } from 'bee-mobile';export default (props) => {  return (    Hello Bee  );};

okay，这次就分享到这里。如果小伙伴们有比较好的react组件库，也可以在下方进行留言讨论，很期待你的贡献！

❤️ 最后

如果觉得这篇文章对你有帮助，帮忙点个『赞/转发』，让更多的人也能看到你的分享！