跨平台 React 组件渲染

Question

我正在学习 React。我的目标是创建一些呈现跨平台的组件。具体来说，我将创建带有以下选项的组件：a) 在浏览器中呈现 b) 在服务器上呈现 c) 在 Windows 上本地呈现和 d) 在 iOS 中本地呈现。根据我有限的了解，这些情况似乎都是可能。不过，我正在尝试了解执行此操作的最简单方法。似乎每个场景都需要不同的方法，这几乎导致四个不同的组件。不过，这似乎是我的误会。

如果我想在以上四种场景中渲染一个按钮，最简单的做法是什么？我认为应该有一个教程来说明这一点，但我还没有找到。

谢谢

Answer 1

我从 React 了解到，React 组件与 React Native 组件不同。你不能在 React 和 React Native 中同时使用一个组件，你应该为每个组件创建单独的项目。但是在 React Native 中，你只需要编写一次代码，就可以在 android 和 IOS 上运行并且他们最近也没有引入 windows 和 mac（1).

总而言之，您应该将 Web 应用程序与本机应用程序分开（可以是 android、IOS、windows 和 mac）但由于 React 和 React Native 彼此没有太大区别，所以它不会像开始一个新项目那么难。

Answer 2

您的 React 本机代码在 Android 和 Ios 中都有效（除非您使用一些特定于平台的库）。要运行您在 Web 中的 React 本机代码，请使用 react-native-web。对于 windows 和 macOS 使用 this.

最好的部分是，您只需编写一次代码，但运行它无处不在。

Answer 3

首先，尝试使用支持您所有环境的包。但是如果你需要单独的实现那么你应该这样做按钮你提到的例子：

创建按钮文件夹
创建 Button.js 或 index.js 文件
创建 Button.[enviroment].js 个您需要的文件，并在根 Button.js 文件中仅导出一个 Button 组件。像这样：

-- /components
  -- /button
    -- `index.js`
    -- `Button.web.js`
    -- `Button.android.js`
    -- `Button.windows.js`


// Button.web.js
export const Button = ({title}) => {
// web specific implementation
}

// Button.windows.js
export const Button = ({title}) => {
// windows specific implementation
}

// index.js
export {Button} from './Button'

Answer 4

有趣 - 我想我会 post 一些基于我自己在统一 UI 上的努力的相关想法。它可能不会直接回答你的问题，但我希望它能引起你的兴趣。

反应和方法

我认为您应该使用正确的工具来完成这项工作。 React 是单页应用程序的绝佳选择，对于桌面应用程序也出奇的好：

SPA 将运行在任何 OS
桌面应用程序将在 Windows、MacOS 和 Linux

手机

我经常使用安全技术，这需要最新的本机支持。在这些情况下，Swift 和 Kotlin 大放异彩，而 React Native 等技术变得很难，因为你总是要经过额外的层，有很多烦恼。

代码示例

我与跨平台 UI 技术的持续斗争是 here，它们包括 React SPA 和 React 桌面应用程序，两者都处理困难的 OpenID Connect 安全流程。

UI 代码在所有情况下都是相同的，包括移动设备，但我避免使用 React 来处理移动应用程序。代码共享将付出更多的努力而不是值得的。此外，在真实的公司中，移动和网络通常由不同的团队开发，他们应该能够选择自己的技术。

摘要

应该分享的是设计模式，而不是技术或代码。设计模式会随着时间的推移而扩展，而代码共享不会。

跨平台 React 组件渲染

Cross Platform React Component Rendering

reactjs

react-native