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

Posted 2023-02-22

【中文标题】是否可以将 Material UI 库与 React Native 一起使用？

【英文标题】：Is it possible to use Material UI library with React Native?

【发布时间】：2020-08-07 10:33:00

【问题描述】：

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

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

【问题讨论】：

在 react-native 和 react 之间共享实际将内容呈现到屏幕上的代码......不是微不足道的。

【参考方案1】：

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

---

react-native-material-bottom-navigation

---

这个Material UI库允许我们添加一个超酷的材质底部导航，它的所有优点都在纯javascript中。它没有原生依赖，易于使用和自定义，而且感觉很棒。

npm install react-native-material-bottom-navigation

---

react-native-material-dropdown

---

正在寻找外观和感觉都像原生的下拉组件？这个材料下拉库就是这样做的。在 ios 和 android 上具有一致行为的 Material UI 下拉菜单，它还支持 横向模式。

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

---

react-native-snap-carousel

---

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

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

---

react-native-material-textfield

---

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

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

---

react-native-material-menu

---

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

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

---

react-native-modal-datetime-picker

---

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

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

---

react-native-snackbar

---

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

npm install react-native-snackbar --save

---

react-native-country-picker-modal

---

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

npm i react-native-country-picker-modal

---

react-native-color

---

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

npm i --save react-native-color

---

react-native-masonry

---

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

npm install --save react-native-masonry

---

更新：

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

【参考方案2】：

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

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

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

【参考方案3】：

ReactNative 的材料设计库

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

https://reactnativepaper.com/

【参考方案4】：

不幸的是，专门为 ReactJS 构建的 Material-UI 库是 React Native 的 Web 对应物，不适用于 React Native 应用程序开发生态系统。这并不意味着您无法为正在开发的应用程序提供原生感觉。提供每个材质主题的库并不是 React Native 开箱即用的。但是，有一些包为组件提供了材料主题。同样，您还可以查看一些令人惊叹的React Native themes，它们为您的应用程序提供现代外观和感觉。他们只是让应用程序看起来很棒并吸引用户群。一切都是关于即兴发挥和适应。

【参考方案5】：

是的，我们可以，但不像在 react js web 开发中那样，我正在添加一个示例——React Native Material UI（支持 iOS 和 Android）