不同的 UI for Android/iOS in interpreted JS cross-platform tools

Different UI for Android/iOS in interpreted JS cross-platform tools

一些跨平台工具(如 Xamarin native 和 RubyMotion)允许为 Android 和 iOS 开发两个单独的视图,同时为它们保持共享的业务逻辑。其他(如 Apache Cordova 或 Xamarin.Forms)共享 UI 和业务层,必要时可选择使用特定于平台的覆盖。

解释的 JavaScript 框架(NativeScript、React Native 或 Appcelerator)的状态如何?他们是否都专注于创建具有平台覆盖的单个 UI,或者他们是否允许为每个平台创建两个单独的视图?例如,是否可以在 Android 中使用 Fragments 创建一个视图,但在 iOS 中创建一个不同的视图(因为 Fragments 在那里不存在)?

Cordova 使用 WebView,这意味着 Android 和 iOS 的 GUI 级别相同,但每个设备版本不同。在 Android 的情况下,每个客户端都有自己的 Chronium 版本,它可以破坏 UI 行为。所以开发者使用 Crosswalk 来设置固定的 Chronium 版本。 (额外 20M 到您的应用程序)。

顺便说一句 Ionic 使用 Cordova 架构的每个平台都使用本机行为。例如,对于位于顶部的 Android 标签,在 iOS - 底部


另一方面,Xamarin (C#)、React-Native(JS) 和 NativeScript(JS) 调用本机 API。他们不使用 WebView,而是生成本机代码。

例如,如果您创建按钮 - 它看起来会有所不同:Android - material 主题,iOS - iPhone 主题


无论如何,底线是:一切都取决于资源和时间。如果您想快速构建具有相同视图的应用程序 - 我会继续使用 Ionic2+ Angular2 + Cordova。

如果您有更多时间 - 继续使用 React-Native 或 NativeScript(文档仍然很差)或 Xamarin (C#)。

React-native的口号是Learn once,write everywhere。所以,你可以选择适合你的需求,你可以:

  • 在平台之间共享 UI。
  • 仅共享业务逻辑。

所以,react-native 的答案是肯定的。您可以创建单独的 UI 或共享它。 由于您正在编写组件,因此分离此逻辑的一种方法是编写 component.android.jscomponent.ios.js,平台会为您加载合适的。请注意,您也可以通过编程方式执行此操作。

你可以在 facebook 使用 react-native

制作的 the official f8 app 中看到