在 NativeBase 和 Shoutem 之间，React Native 最好用哪个？

Posted 2023-02-23

【中文标题】在 NativeBase 和 Shoutem 之间，React Native 最好用哪个？

【英文标题】：Between NativeBase and Shoutem, which is best to use for React Native?

【发布时间】：2016-11-30 13:31:46

【问题描述】：

我发现 React Native 有 2 个 UI 组件最常用。我想使用其中之一。其中哪一个更易于使用和自定义？

【参考方案1】：

目前主要有 3 个 UI 库：

Shoutem UI Components React Native Elements Native Base components

Shoutem UI 组件其实只是Shoutem UI Toolkit的一部分，其中包括：

UI components - 用于 RN 应用程序的可定制组件集 Theme - 在一处设计您的 RN 组件 Animation - 一组声明性动画

UI 组件带有预定义的精美设计，因此创建美观的应用程序就像简单地对组件的代码进行 c/p-ing 一样简单。但是，它们可以在一个地方使用主题完全自定义，因此您可以实现组件的关注点分离。动画也可以用于类似的事情。

要查看存在哪些类型的 UI 组件，请在屏幕中包含 <Examples> 组件，如 here 所述。

React Native Elements 简化了 React Native 中常用组件的使用。 Native Base 也能做到这一点，允许您自定义它们，并且拥有比 React Native Elements 更好的文档。

免责声明：我在 Shoutem 工作

【讨论】：

我认为其中一个是不可定制的，不确定是哪一个，它是shoutem 还是native base。 Tommz 你能澄清一下吗？

嘿@WaleedArshad，Shoutem 和 NativeBase 是可定制的。我在 React Native Elements 上找不到任何东西。但是，只有 Shoutem 使用集中的地方通过@shoutem/theme 定制其组件。

感谢您的澄清

@Tommz 有没有厨房水槽应用可以演示组件？

@svlada 这应该可以：github.com/shoutem/ui/tree/develop/examples/RestaurantsApp

【参考方案2】：

以上三个库都不错，各有千秋。在你使用所有这些之后，它完全取决于一次。

NativeBase是一个移动应用开发框架；在 React Native 之上构建一个层，为您提供移动应用程序开发的基本组件集，帮助您在原生平台上开发世界级的应用程序体验。

NativeBase 让您可以使用单一代码库构建在 ios 和 android 上运行的应用程序。它简化了您的开发。

由于 NativeBase 构建在 React Native 之上，因此对于任何组件，您都可以传递 style 属性，该属性将合并到该组件的默认样式中。这也与回调事件有关。使用主题从一处高度可定制。

NativeBase 清楚地记录了所有这些。 NativeBase 文档通过示例输出为您提供有关其用法的完整信息、替换 React Native 元素、如何设置每个组件的样式、如何为每个组件自定义主题等等。

此外，NativeBase 正在被重写以增强其易用性。即将发布。

继续尝试 NativeBase！

在一个工具包中查看 NativeBase 组件的工作演示NativeBase-KitchenSink。

免责声明：我在 NativeBase

工作

【讨论】：

对用户的性能和应用安装大小有什么影响？

它有 RTL 支持吗？

【参考方案3】：

两者都很棒。 Shoutem 有一些非常酷的动画过渡。你也不会出错。我的建议是审查每一个，然后选择一个感觉更正确或最符合您要求的那个。

别忘了查看React Native Elements

【参考方案4】：

您可以使用 NativeBase 或 Shoutem UI。两者都略有不同。 NativeBase 是根据平台推荐设计的，并受到 Ionic 的启发，而 Shoutem 则拥有自己流畅而干净的设计。

【参考方案5】：

我玩过原生基础和 Shoutem UI。两者都是完全定制的。 我更喜欢 Shoutem，因为它有更多的功能、动画、扩展、构建器等。但不幸的是，Shoutem UI 目前不支持最新的 react-native (>0.40) 和 expo(> 15.0)。所以我持有将其用于生产的计划。

我认为这是因为最新的 RN 已弃用 NavigationExperimental 和 Expo SDK 使用 react-native-svg >= 5.2.0。 CMIIW