reactjs 是否可以将材质UI库与React Native一起使用?

yzuktlbb  于 2022-12-03  发布在  React
关注(0)|答案(6)|浏览(152)

我使用react已经有一段时间了,我知道Material UI https://material-ui.com/是为react构建的UI库。我的问题是-是否可以将这个库(为react构建的)与react-native一起使用?
在一些研究中,我发现react-native有另一个UI库,称为react-native-paper,但我想知道Material-UI是否可以与react-native配合使用?

fwzugrvs

fwzugrvs1#

Material UI是为ReactJS(Web应用)构建的,因此它实际上不能与React Native框架一起工作。但是,下面列出了一些库,可以帮助您入门:

1.******
这个Material UI库允许我们添加一个超酷的材料底部导航,它的所有好处都是纯JavaScript的。它没有本机依赖性,易于使用和定制,而且感觉很棒。

npm install react-native-material-bottom-navigation

1.******
正在寻找外观和感觉都像原生一样好的下拉组件吗?这个材质下拉库就是这样做的。材质UI下拉在iOSAndroid上具有一致的行为,它还支持 * 横向模式 *。

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.******
Modal DateTimePicker使用本机实现在iOS和Android中为该功能提供支持。

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

1.******
如果您正在寻找可以在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可让您构建自己的 AndroidiOS 原生组件,以满足您应用的独特需求。不过,还有一个蓬勃发展的社区贡献组件生态系统。为了让您尽快开始,我建议您查看Native Directory,了解社区一直在创建什么以及您如何从中受益。

7z5jn7bk

7z5jn7bk2#

material-ui是一个基于react的材料设计系统的实现。它是为了Web开发而设计的,你得到的输出是HTML/ CSS(它们是每个网页的构建块)。
react-native是一个框架,可让您使用React的功能和语法构建原生移动的应用。移动应用的原生编程语言取决于您当前运行的移动操作系统。React原生框架使您能够以React风格进行编程,输出将是使用原生操作系统语言的编译版本(特定于操作系统)。
不幸的是,这两个函数实际上不能一起工作,而且您不能在您的react原生代码中使用任何React库。

a14dhokn

a14dhokn3#

ReactNative的材料设计库

React Native Paper是一款高品质、符合标准的 Material Design 库,可满足所有主要使用案例的需求,让您的React Native应用程序看起来和感觉都是原生的。
https://reactnativepaper.com/

ylamdve6

ylamdve64#

遗憾的是,专门为ReactJS构建的material-UI库(React Native的Web对应物)并不适用于React Native应用开发生态系统。这并不意味着您不能为您正在开发的应用提供原生感觉。提供每种材质主题的库并不是为React Native开箱即用的。但是,有一些软件包提供了材料主题化的组件。同样,你也可以查看一些令人惊叹的React Native themes,它们可以给予你的应用具有现代的外观和感觉。它们只是让应用看起来令人惊叹,并吸引用户群。这一切都是关于即兴和适应。

5sxhfpxr

5sxhfpxr5#

如果你愿意放弃React Native ,选择渐进式的web应用程序路线(比如Capacitor),还有另一种解决方案。
请注意,这可能比react-native或expo更棘手。例如,获得与react-native的安全区域视图等效的内容需要一些手动操作(使用plugin like this one)。通常,我发现访问本机功能总是稍微复杂一些。

x6yk4ghg

x6yk4ghg6#

我正在使用react-native-elements,对Android和IOS有很好的性能。但是,它的复杂改变了组件的风格。
几个月以来,我尝试了NativeBase和它的完美。它有很多组件,种类MaterialUI和完美的工作在Android和IOS。它是一个非常完整的库。

相关问题