React Native UI 工具包综述

React Native 的核心用户界面组件提供大量跨平台的功率,如果你愿意自己做很多的样式化。另一方面,因为它缺少一个基本的按钮(触摸可用任何人?),你可能会发现自己想要开始你的下一个 React Native 项目,有更多的基础。

图书馆

我们将比较和对比的图书馆(按字母顺序)是:

• awesome-react-native - 一次性组件和原生模块列表
• 材料用户界面 - 将材料设计带到 React Native
• NativeBase - React Native 的必要跨平台用户界面组件* React Native Elements - 跨平台 React Native UI Toolkit
• Shoutem - React Native应用程序的可自定义组件集

其中一些具有演示应用程序,您可以使用 Expo),创建反响本地应用程序背后的技术(https://github.com/react-community/create-react-native-app)查看。只需在 iPhone 或 Android 上下载并打开 Expo 应用程序,在浏览器中点击 UI Toolkit 的 Expo 链接,然后使用 QR 代码扫描仪在手机上打开演示应用程序。

组件类别

组件类别将被用来表示库中包含哪些组件,而无需列出每个组件. 以下是可能的类别列表。

• 输入:按钮,输入字段,检查箱,等等
• 先进的输入: 数据选择器,自动完成, 文件上传器
• 指标: 标签, 进度指标, 饼干, 零食箱
• 导航: 菜单, 卡片, 等
• 对话: 对话, 模式, 流行
• 布局: 图画, 列表, 卡片, 网格, 类型

《原生反應》

在我们进入下面的更沉重的库之前,值得注意的是,完全可以使用这个(github repo上的广泛组件列表)创建您自己的Hodge-podge组件(https://github.com/jondot/awesome-react-native#components).使用这些插件和播放组件尽可能少或多,以使您的React Native开发体验既有成效又有趣。

• Github: https://github.com/jondot/awesome-react-native#components
• 明星: 14k+
• 组件: 输入, 先进的输入, 指标, 导航, 对话, 布局

材料 UI

React Native 有多个材料用户界面工具包,虽然它们看起来非常相似,但具有一个 ** HUGE的区别:我发现只有一个 ** ONE,它可以在iOS和Android上工作: react-native-material-kit。

• Github: https://github.com/xinthink/react-native-material-kit
• 明星: 3k+
• 组件:输入,指标
• 文档: http://www.xinthink.com/react-native-material-kit/docs/index.html
• 演示文稿: https://github.com/xinthink/rn-demo (下载并构建演示源)

<$>[注] 如果您对 Android 专用的库很好,并且不担心 iOS 兼容性,您可以查看 react-native-material-design,其中包含更多组件,包括输入、指标和一些布局。

原生

NativeBase在组件方面有很多可供提供的 - 他们的演示应用程序因某种原因被称为Kitchen Sink. 这个库做得很好,试图在iOS和Android UX之间取得平衡,使用平台特定的风格来适应设备。

• Github: https://github.com/GeekyAnts/NativeBase *明星: 5.5k+ *组件:输入,指标,导航,布局 *文档: https://docs.nativebase.io/ *演示: https://expo.io/@geekyants/nativebase-kitchenSink

原生元素反应

React Native Elements 是本集中最受欢迎和最具功能的 UI 工具包之一. React Native Elements 是少数不试图复制任何 iOS 或 Android 特定风格的工具包之一,而是创建了一种独特的组合。

• Github: https://github.com/react-native-training/react-native-elements *星: 6.5k+ *组件:输入,一些先进的输入,指标,导航,布局 *文档: https://react-native-training.github.io/react-native-elements/docs/getting_started.html *演示: https://expo.io/monte9/react-native-elements-app

微笑

Shoutem 是一个比本轮版的其他用户界面更精致和设计的 UI 工具包,更倾向于 iOS 风格指导方针。如果您要优雅,这可能是正确的选择。 然而,关于 Shoutem 最独特的事情之一是,它们提供了一个完整的平台来开发位于 React Native 上面的应用程序,鼓励您将应用程序写成一组扩展,除了他们提供的 40 多个官方扩展之外。

• Github: https://github.com/shoutem/ui
• 星: 2.5k+
• 组件: 导航,输入,布局
• 文档: https://shoutem.github.io/docs/ui-toolkit/introduction
• 演示: https://new.shoutem.com/

包装上

无论你走哪条路径,从使用 React Native UI 工具包中的一种,到通过奇妙的反应原生集成一个组件包,站在巨人的肩膀上将帮助你获得下一个 React Native 应用程序的伟大 - 和时尚 - 开始。