是否可以将 Material UI 库与 React Native 一起使用？

我已经使用 react 有一段时间了，我知道 Material UI https://material-ui.com/ 是为 react 构建的 UI 库。我的问题是 - 是否可以将这个库（为反应而构建）与 react-native 一起使用？

在一些研究中，我发现 react-native 有另一个名为 react-native-paper 的 UI 库，但我想知道 Material-UI 是否可以与 react-native 结合使用？

原文由 Sandeep Amarnath 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.2k

material-ui 是材料设计系统的基于反应的实现。它适用于 Web 开发，您获得的输出是 HTML/CSS（它们是每个网页的构建块）。

react-native 是一个框架，可让您使用 React 的强大功能和语法构建原生移动应用程序。移动应用程序的本地编程语言取决于您当前运行的移动操作系统。 React Native 框架使您能够以 React 风格进行编程，并且输出将是使用本机 OS 语言的编译版本（特定于操作系统）。

不幸的是，这两者并没有真正一起工作，你不能只使用任何 React 库并在你的 react-native 代码中使用它。

原文由 Dekel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Material UI 是为 ReactJS （网络应用程序）构建的，因此它并不能真正与 React Native 框架一起工作。但是，这里列出了一些可以帮助您入门的库：

这个 Material UI 库允许我们在纯 javascript 中添加一个超酷的 material 底部导航及其所有功能。它没有本机依赖项，易于使用和自定义，而且感觉很棒。

 npm install react-native-material-bottom-navigation

寻找看起来和感觉都像原生的下拉组件？这个材料下拉库就是这样做的。 Material UI 下拉菜单在 iOS 和 Android 上具有一致的行为，它也支持 _横向模式_。

 npm install --save react-native-material-dropdown

我在 React Native 中使用了许多滑动器组件。他们每个人都工作正常，但这个把事情带到了一个全新的水平。

 npm install --save react-native-snap-carousel

来自下拉包（上面列出）的同一作者。

 npm install --save react-native-material-textfield

如果您正在寻找 React Native 中的溢出菜单支持，这个库会做得很好。您可以在工具栏中将其用作溢出菜单（更多菜单）。

 npm install --save react-native-material-menu

Modal DateTimePicker 使用本机实现在 iOs 和 Android 中提供对此功能的支持。

 npm i react-native-modal-datetime-picker @react-native-community/datetimepicker

如果您正在寻找可以在例如 API 调用结束时轻松显示的吐司/小吃店选项，那就太好了。

 npm install react-native-snackbar --save

该选择器模块允许用户从列表中选择国家。它支持搜索、延迟加载。包括深色模式。

 npm i react-native-country-picker-modal

React Native 的颜色组件。仅限 JavaScript，适用于 iOS 和 Android。

 npm i --save react-native-color

如果您正在寻找支持动态 width & height 的网格列表，那就太好了。

 npm install --save react-native-masonry

更新：

React Native 让您可以为 Android 和 iOS 构建自己的本机组件，以满足您应用的独特需求。然而，还有一个由社区贡献的组件组成的蓬勃发展的生态系统。为了让您尽快开始，我建议您查看 Native Directory 以查找社区一直在创建的内容以及您如何从中受益。

原文由 Dzenis H. 发布，翻译遵循 CC BY-SA 4.0 许可协议