为Android和iOS开发组件的正确方法是什么？

Question

在我们公司，我们有几个为iOS构建的React Native组件。它们都是基于JavaScript的组件，所以它们也应该在React Native for Android下工作。此外，我们拥有的大多数组件应该只在设计风格上有所不同，因此我们需要在两个平台之间编码这些差异。

启用此组件以支持Android的正确方法是什么？我们是否必须使用if检查应用Platform并相应更改样式？如果我们想要将两个文件Component.android.js和Component.ios.js中的组件分开，React Native会根据它运行的平台自动检测需要使用哪个文件吗？

Answer 1

我更喜欢一个非常简单的解决方案。只需使用文件扩展名：.ios. vs .android.

E.g。看看我的导航我在android nav中使用android工具栏，如果我愿意，我可以使用navigatorIos for ios。应用程序平台将根据扩展名正确加载相应的平台文件。这意味着我只需正常加载它：

var Nav = require('./jsx/Nav');

我喜欢遵循React所说的声明式方法，因此：

1）按照功能/行为而不是平台来组织文件，因为具有不同扩展名的相同文件将彼此相邻。

2）无论是显性还是隐式平台都不相关，因为只有当它是不同的平台特定组件时才会将文件拆分为扩展（所以这是固有的）

3）永远不需要在代码中处理不同的平台行为。

4）这是我已经提到的组合解决方案：跨平台的文件不需要平台扩展（在某些情况下甚至可能不需要扩展的抽象类）。

这是一个简单的解决方案，我不知道它对大型项目的扩展程度如何;但我完全赞成它的陈述性简单。

Answer 2

1。组织他们

• 某些组件仅限IOS，有些仅为Android，有些则为跨平台。

• 我将我的组件放入3个目录：

  /common/components/ /android/components/ /ios/components/

2。决定是否要求平台显式或隐式

• 对于每个组件，有两种基本方法：
  1. 让父母通过合成来管理平台（即父母选择要渲染和/或将平台传递给孩子的组件）
  2. 将平台渲染委托给孩子（即孩子找出它所在的平台并相应地渲染自己）。
• 正确的方法取决于您的IOS与Android布局，样式和功能的差异。如果两个平台具有不同的布局和功能，您可能会喜欢组合方法。如果您的代码在各个平台上真的是同构的，那么您可能会支持委派。

3。对于微不足道的差异，请使用if或switch

• 如果IOS和Android风味之间的差异纯粹是风格（例如不同的样式表），那么您可以使用简单的if来检索正确的风格。

4。对于更显着的差异，请使用继承和组合以获得更好的模块性

• 如果您的组件在IOS和Android之间存在显着差异（例如<MyCameraWidget>），那么您可以使用基础<BaseCameraWidget>，然后<CameraWidgetIOS>和<CameraWidgetAndroid>变体extend the base component。这样就可以将跨平台与特定于平台的逻辑完全分开，以便以后更好地实现组件可维护性。
  • 变体可能存在于不同的文件中，也可能位于同一个文件中，具体取决于您是否要公开它们。
  • 如果您使用的是委托平台渲染，您可能希望创建一个<CameraWidget>外观，其中包含一个简单的任务，即确定其所在位置并呈现正确的<CameraWidgetIOS>或{{1} } component。

最后，阅读this Facebook article，了解您可能想要使用React Native包装程序进行的调整。有一个黑名单功能，允许您阻止不同版本的Android或IOS文件，但截至今天，该功能没有记录，可能尚未发布。