user-interface - 从单个 React Native 代码库实现不同的 Android / iOS UI 约定？

Question

这甚至可能吗？

我发现的 React Native 的每个概述/分析都涵盖了使用 RN 的基本原因，并且要么是旧的（没有 Android，或者“Android 刚刚发布”），要么侧重于它编译为本机元素的事实（即不是 HTML5 )

我缺少的是，在 React Native 中构建的应用程序如何满足每个平台上的应用程序应该如何表现的样式指南、约定和用户期望？我不想制作一个看起来像 iOS 应用程序的 Android 应用程序，反之亦然。

Answer 1

平台特定样式和交互指南的重要资源是Android 的 Material Design 系统和iOS 的人机界面指南。

在 React Native 上实现 iOS 感觉的 UX 非常简单，开箱即用。Android 应用程序可能会受益于使用react-native-material-design包来获得原生感觉控件。

对于通过 React Native 进行移动开发的 Web 开发人员（我就是其中之一）来说，最大的挑战之一就是要知道是什么让原生的感觉。这是一个非常主观和敏感的话题，不能通过阅读指南或应用逻辑工程思维来解决问题。

我发现使用大量流行的应用程序并尝试推理是什么让它们运行是一种非常宝贵的实践，就像批判性地评估你自己的工作并花时间和关注细节一样，因为有时这就是一切的不同之处。

Answer 2

正如@jevakallio 回答的那样，您可以根据 Google 或 Apple 的平台特定规则自定义 UI。从技术上讲，它可以通过多种方式完成。如果差异很小，您可以使用Platform模块进行条件检查：

if (Platform.OS === 'ios') {
    ...
} else {
    ...
}

如果差异很大，则使用文件后缀（android或ios）：

MyComponent.ios.js
MyComponent.android.js

https://facebook.github.io/react-native/docs/platform-specific-code.html

您甚至可以为每个平台或设备类型（平板电脑或手机）制作完全不同的 UI，保存所有非 UI 逻辑通用。