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

Question

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

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

Answer 1

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

这个Material UI库允许我们在纯 javascript 中添加一个超级酷的材质底部导航以及它的所有特权。它没有本机依赖项，易于使用和定制，而且感觉很棒。

npm install react-native-material-bottom-navigation

正在寻找外观和感觉都与本机一样出色的下拉组件？这个材质下拉库就是这样做的。Material UI 下拉菜单在iOS和上具有一致的行为Android，也支持横向模式。

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

我在 react native 中使用了许多 swiper 组件。它们中的每一个都可以正常工作，但是这个将事情提升到一个全新的水平。

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

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

npm install --save react-native-masonry

更新：

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

Answer 2

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

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

不幸的是，这两者并不能真正协同工作，而且您不能只使用任何 React 库并在您的本机代码中使用它。

Answer 3

ReactNative 的材料设计库

React Native Paper 是一个高质量、符合标准的Material Design库，可以让您的 React Native 应用程序看起来和感觉都是原生的，它涵盖了所有主要用例。