从单个React Native代码库中实现不同的Android / iOS UI约定?

时间:2016-07-14 22:04:47

标签: user-interface mobile react-native user-experience react-native-android

这甚至可能吗?

我发现的React Native I的每个概述/分析都涵盖了使用RN的基本原因,并且要么是旧的(没有Android,或者#34;刚刚发布的Android")或者关注的事实是它编译为原生元素(即不是HTML5)

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

2 个答案:

答案 0 :(得分:1)

针对特定平台的样式和互动指南的开创性资源包括Material Design system for AndroidHuman Interface Guidelines for iOS

在React Native上实现iOS感觉用户体验非常简单。 Android应用可能会受益于使用react-native-material-design包来获取原生感觉控件。

通过React Native(我是其中一个)进行移动开发的Web开发人员面临的最大挑战之一就是知道是什么让本机感觉。这是一个非常主观和敏感的主题,并且不能通过阅读指南或对问题应用逻辑工程思维来轻松解决。

我发现使用大量流行的应用程序并试图推断出是什么让它们发挥作用是一种非常宝贵的做法,因为批评性地评估自己的工作,并将时间和精力放在细节上,因为有时这是所有人差异。

答案 1 :(得分:1)

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

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

如果差异很大,请使用文件后缀(androidios):

MyComponent.ios.js
MyComponent.android.js

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

您甚至可以为每个平台或设备类型(平板电脑或手机)创建完全不同的UI,以保存所有非UI逻辑。