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

时间：2020-04-23 23:04:55

标签： reactjs react-native material-ui

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

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

5 个答案:

答案 0 :(得分：10)

材料UI 是为 ReactJS （网络应用程序）构建的，因此它实际上不能与 React Native 框架一起使用。但是，以下是一些库的入门指南：

  1. react-native-material-bottom-navigation

该 Material UI 库使我们能够以纯JavaScript的方式添加超酷的材质底部导航及其所有功能。它没有本地依赖性，易于使用和自定义，而且感觉很棒。

npm install react-native-material-bottom-navigation
  1. react-native-material-dropdown

是否在寻找与本机外观相似的下拉组件？这个材料下拉库就是这样做的。 Material UI下拉列表在iOS和Android上具有一致的行为，并且还支持 landscape模式。

npm install --save react-native-material-dropdown
  1. react-native-snap-carousel

我在react native中使用了许多刷卡器组件。他们每个人都可以正常工作，但是这一步将事情带到了一个全新的高度。

npm install --save react-native-snap-carousel
  1. react-native-material-textfield

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

npm install --save react-native-material-textfield
  1. react-native-material-menu

如果您要在React Native中寻找溢出菜单支持，那么这个lib会做的很好。您可以在工具栏中使用它作为溢出菜单（更多菜单）。

npm install --save react-native-material-menu
  1. react-native-modal-datetime-picker

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

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

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

npm install react-native-snackbar --save
  1. react-native-country-picker-modal

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

npm i react-native-country-picker-modal
  1. react-native-color

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

npm i --save react-native-color
  1. react-native-masonry

如果要查找支持动态width和height的网格列表，则非常好。

npm install --save react-native-masonry

更新：

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

答案 1 :(得分：9)

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

是一个框架，可让您使用React的功能和语法来构建本机移动应用程序。移动应用程序的本机编程语言取决于您当前正在运行的mobile-os。 React Native框架使您能够以React风格进行编程，并且输出将是使用本机OS语言的已编译版本（特定于OS）。

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

答案 2 :(得分：3)

ReactNative 的材料设计库

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

https://reactnativepaper.com/

enter image description here

答案 3 :(得分：2)

不幸的是，专门为ReactJS构建的material-UI库（它是React Native的Web副本）不适用于React Native应用程序开发生态系统。这并不意味着您无法为正在开发的应用程序提供本机的感觉。提供每个材料主题的库对于React Native来说并不是开箱即用的。但是，有些包装为组件提供了主题化的材料。同样，您也可以检查一些令人惊叹的React Native themes，使您的应用具有现代感。他们只是使应用看起来令人惊叹并吸引用户。就是即兴创作和适应。

答案 4 :(得分：-2)

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

相关问题
最新问题