时间戳

首页 > 解决方案 > 是否可以将 Material UI 库与 React Native 一起使用？

reactjs - 是否可以将 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 结合使用？

标签： reactjsreact-nativematerial-ui

解决方案

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

  1. 反应原生材料底部导航

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

npm install react-native-material-bottom-navigation
  1. 反应原生材料下拉

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

npm install --save react-native-material-dropdown
  1. 反应原生快照轮播

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

npm install --save react-native-snap-carousel
  1. 反应本机材料文本字段

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

npm install --save react-native-material-textfield
  1. 反应本机材料菜单

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

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

模态 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. 反应本机国家选择器模式

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

npm i react-native-country-picker-modal
  1. 反应原生颜色

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

npm i --save react-native-color
  1. 反应原生砌体

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

npm install --save react-native-masonry

更新：

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

推荐阅读