React-Native 服务器驱动的 ui

Posted 2023-03-12

【中文标题】React-Native 服务器驱动的 ui

【英文标题】：React-Native Server Driven ui

【发布时间】：2020-12-01 07:40:11

【问题描述】：

我一直想知道 Airbnb、Flipkart 和 Swiggy 等应用程序如何即时更新其 UI。即使我没有更新应用程序，Flipkart 在节日期间也会显示不同的 UI，而 Swiggy 总是根据设备位置更改其 UI。

如何在我的 react-native-app 中实现这一点？

Webview 是解决方案？

请帮助我.. 谢谢

【问题讨论】：

你能解释一下吗？我猜你说的是webview？？不更新应用？？

更新是指，从Play商店或应用商店更新还是更新是指刷新应用？

【参考方案1】：

有多种方法可以做到这一点。

一种方法是使用您提到的 WebViews，这将使更改接口变得微不足道，因为它完全在服务器中控制。但是这种方法的主要问题是性能和非原生的外观和感觉。这是首先使用 React Native 优于混合框架的两个主要优势，因此，在任何地方都使用 WebView 没有多大意义。但是，如果您的应用程序中有一小部分会定期更新（服务条款除外），您可以使用 WebView 来执行自定义视图。

一种更省力的更常见方法是为不同的外观准备好所有代码，但使用功能标志来切换不同的视图。这与深色主题的工作方式相同。我们可以通过这种方式进行的自定义数量有限，因为我们需要提前编写所有代码。

另一种方法是使用server driven UIs。使用此方法，您将在客户端中拥有一个预定义的模板，您可以在运行时使用来自服务器的数据填充这些模板。对于一个非常简单的示例，您可以拥有一个可以填充季节性问候图像的标题图像。但不是像图像这样简单的东西，这也可以是更明显的变化。 （例如 - 列表视图而不是网格视图）

一种更复杂的方式是使用code push。这将允许诸如季节性 UI 更改之类的事情。但这需要更多的设置，并且可能无法提供最佳的用户体验。

【参考方案2】：

Webview 是最好的，因为这样您可以更改 UI 和业务逻辑或 UI 处理逻辑。

但你必须为此开发一个最低限度的架构。

这是我的方式。

开发主机层以使用相机、共享偏好、文件系统等。

开发一个通信层，负责您的 webview 和主机层之间的通信，以便您的 webview 可以访问通常无法从 webview 直接访问的所有必需的设备平台（例如 android 或 ios）功能。

所以现在您可以渲染任何您想要的 UI（通过 html 和 CSS），您可以通过 javascript 放置您想要的任何逻辑，现在您可以访问您真正需要的所有必需的设备功能。

所以，现在你就是你的应用之王了。

只是你必须在你真正需要的时候不断更新服务器中的 UI 或逻辑。

有一些缺点，比如

android 中的webview 与我们普通的浏览器不同。一些必需的功能不可用。 它的行为在不同的 API 级别是不同的。所以你必须很好地测试它。对于测试，您可以使用 Genymotion。 它在某些旧设备/API 中无法正常工作。 外观和感觉真的很重要。但聪明的设计可以解决这个问题。 如果您希望您的整个应用程序在单个 web 视图中，那么您必须在 android 或 ios 的页面转换功能上妥协。但同样，智能动画设计将解决这个问题。

但这只是一个可行的解决方案，而不是服务器驱动的 UI 的智能解决方案。

我使用了一些服务器驱动的 UI 框架。但它们似乎是开销，并且缺少一些功能。

因此应该有一个框架，通过它我们可以从服务器动态呈现原生 UI，并具有相应的业务逻辑更改功能和所有可能的设备功能的可访问性。

几个月前，我开始开发服务器驱动的 UI 框架。我做了一点点。但由于时间不够，我真的没能完成。

如果有人对此项目感兴趣，请随时与我联系。

我对这个项目有一个可靠的想法和架构。

此框架可以在应用开发领域掀起一场革命。

电子邮件：[e-mail]