React-Native 服务器驱动的 ui [英] React-Native Server Driven ui

问题描述

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

I always wonder how apps like Airbnb, Flipkart, and Swiggy update their UI on the fly. Even if I didn’t update the app, Flipkart shows different UIs during festivals, while Swiggy always changes its UI based on the device location.

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

How I implement this in my react-native-app?

Webview 是解决方案吗?

Webview is the solution?

请帮助我..谢谢

推荐答案

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

There are multiple ways you can go about doing this.

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

One way would be to use WebViews as you've mentioned, this would make it trivial to change the interfaces as it's entierly controled in the servers. But the main issue with this approch will be performance and non native look and feel. These are the two main advantages of using React Native over hybrid frameworks in the first place and therefor, it wouldn't make much sense to use WebViews everywhere. But if there's a small slice of your application that updates regularly(ex - terms of service) you could use a WebView to do the custom views.

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

A more common way that's low effort would be to have all the code in place for the different looks, but use feature flags to toggle different views. This would work the same way that a dark theme would work. The amount of customization we can do this way is limited because we need to code everything ahead of time.

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

Another way is to use server driven UIs. With this approch, you will have a pre defined templates in the client that you them populate on run-time with data from the server. For a very simple example, you could have a header image that could be populated with a seasonal greeting image. But instead of simple things like images, this can be much more visible chagnes as well. (ex - List view instead of Grid View)

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

One more involved way would be to use code push. This would allow things like seasonal UI changes. But this requires a lot more setup and might not provide the best user experience.

这篇关于React-Native 服务器驱动的 ui的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！