React-Native 服务器驱动的用户界面

Question

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

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

Webview 是解决方案吗？

请帮助我.. 谢谢

Answer 1

您可以通过多种方式来做到这一点。

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

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

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

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

Answer 2

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

但是你必须为此开发一个最小的架构。

这是我的方式。

开发主机层以使用摄像头、共享首选项、文件系统等。

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

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

所以，现在您是应用程序之王了。

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

有一些缺点，比如

1. android中的webview与我们普通的浏览器不同。一些必需的功能不可用。
2. 不同API级别其行为有所不同。所以你必须很好地测试它。对于测试，您可以使用Genymotion。
3. 它在某些旧设备/API 中效果不佳。
4. 外观和感觉确实很重要。但聪明的设计可以解决这个问题。
5. 如果您希望整个应用程序在一个 Web 视图中，那么您必须妥协于 Android 或 iOS 的页面转换功能。但智能动画设计将再次解决这个问题。

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

我使用过一些服务器驱动的 UI 框架。但它们似乎有点开销并且缺乏一些功能。

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

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

如果有人有兴趣参与这个项目，请随时与我联系。

我对这个项目有一个扎实的想法和架构。

这个框架可以在应用程序开发领域掀起一场革命。

电子邮件：[电子邮件受保护]