繁体   English   中英

React-Native 服务器驱动 ui

[英]React-Native Server Driven ui

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

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

Webview 是解决方案吗?

请帮助我..谢谢

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

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

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

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

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

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

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

这是我的方式。

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

Develop a communication layer which will be responsible for communication between your webview and the host layer so that your webview can access all the required device platform(eg. android or ios) features which can not be normally accessed directly from webview.

因此,现在您可以渲染您想要的任何 UI(通过 HTML 和 CSS),您可以通过 javascript 放置您想要的任何逻辑,现在您也可以访问您真正需要的所有必需的设备功能。

所以,现在你是你的应用程序之王。

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

有些缺点就像

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

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

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

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

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

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

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

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

email:bedmad82@gmail.com

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM