reactjs - 如何将 ReactJS Web 应用程序转换为移动友好的应用程序

我目前正在开发一个复杂的 Web 应用程序，主要用 ReactJS 和 Redux 编写，它使用 Node 和 Docker 容器进行部署。

由于该应用程序目前主要由笔记本电脑用户使用，我们的下一个目标是使应用程序对移动设备友好（主要是 iOS），并允许用户利用手机的相机将照片直接上传到应用程序。

这是我第一次尝试使 Web 应用程序对移动设备友好，所以我想知道这样做的最佳方法是什么。我曾考虑使用 CSS 媒体查询来根据屏幕大小调整布局，但我们遇到了一些缺点，例如弹出窗口或模式看起来不像预期的那样。

我们应该走在 React Native 中重写代码的路线（不是理想的方法），还是有其他更合适的解决方案？

谢谢

标签： reactjsreact-nativemobile

有许多选择，如果在项目开始时实施，其中大部分会更好。到目前为止，移动优先的 UI 开发是处理不同设备尺寸的最简单方法，正如您已经猜到的元素，例如减少模态框。

如果您还没有使用响应式网格解决方案，我绝对建议您使用带有响应式网格解决方案的 UI 库。可用的包括但不限于Material-UI、Bootstrap（使用React Bootstrap等反应实现）和Ant Design。

至于你是否应该重写，这取决于你比较成本和收益。我的建议是，与其计划使用特定的东西，例如 iOS，不如计划支持设备尺寸。任何体面的 UI 框架都可以根据常见断点来工作，这些断点将您从“横向 iPhone X”的思维方式抽象为“超小”、“小”、“中”、“大”等。