如何创建可重用（React ↔ React Native）组件？答案

【问题标题】：How to create reusable (React ↔ React Native) components?如何创建可重用（React ↔ React Native）组件？
【发布时间】：2021-07-11 09:29:53
【问题描述】：

任务是在 React 上创建一个网站，然后是同一个移动应用程序。移动应用程序将几乎完全重复网络应用程序。

我之前没有开发过移动应用程序，现在我正在努力解决这个问题。据我了解，最简单的方法是将 React Native 用于移动应用程序。是这样吗？还是有更方便的选择？（不是 Web 视图）

我希望尽可能有一个单一的代码库，并在 React Native 中重用 React 组件。

我看到一些需要考虑的功能：

样式化组件而不是 css
无显示：网格

在开始开发之前我还需要考虑什么？

React Native 将如何对样式化组件中的 :hover 等特定于 Web 的事物做出反应？它会抛出错误还是忽略它？

我可以使用哪些 UI 框架？例如，我看到 Grommet 和 Rebass 使用样式组件。他们的组件会在 React Native 上工作吗？

或者例如，antDesign - 它有一个 React Native 版本，组件的语法在外观上相似。我可以通过简单地导入 rn 版本的 antd 来在 React Native 中重用 web 版本的组件吗？

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

好问题。我可以从 Grommet 的角度回答，听起来 Grommet 可以很好地满足您的最高要求，它使用样式组件而不是 CSS，并且它确实支持移动设备或不同的窗口大小，其内置的 T 恤大小调整机制为small'（移动）、'medium'（平板电脑）、'large'（桌面）和其他可选的用户自定义样式。

我不确定你需要多大的 React Native 支持，但我能够构建许多支持移动设备的 Grommet 移动应用程序，而无需使用 React-Native。

【讨论】：