问题 可以使用反应本机来反应js web代码来构建移动应用程序吗?


我正在开发一个宠物项目(Web应用程序),我想知道我是否应该使用反应,因为从这段代码创建本机应用程序很容易(将来如果我需要)。

  • 如果答案是肯定的,那么最佳做法是什么 最重复?

  • 如果答案是否定的,您能推荐替代方案吗?

有关我的情况的更多信息。

我是比较新的反应,我的替代品将是很好的带有bootstrap和jquery的html。我正在考虑使用asp.net mvc和web api。


6915
2017-12-14 04:25


起源

有 github.com/necolas/react-native-web,但它反过来工作..在React-Native中构建并稍后创建网页 - atlanteh
有可能的。我建议你阅读 在React Web和Native Apps之间共享代码 - Diogo Sgrillo
就像@atlanteh所说,那个框架存在。 React-Native没有“DOM”,但可以使用DOM创建React Native中使用的相同组件。 (浏览器提供比React Native组件支持的更多内置渲染灵活性) - Shawn Khameneh


答案:


在React Web应用程序和React Native应用程序之间共享应用程序逻辑,同时保持每个平台的单个组件呈现是唯一的!

在我看来,这是一个很好的选择,我们有。我将向您概述该方法和一些建议。

在理想的世界中,我们将能够共享100%的代码。据我所知,这是不可能的,但我们仍然可以分享很多代码。尽管React Native与React类似,但需要注意的是这一点非常重要 渲染代码是不同的。相反,网络就像 <div> 要么 <span>,你使用像React Native组件 <View><Text> 和其他内置组件。

但是,在大多数情况下,业务逻辑只是JavaScript,这是我们可以共享的重要事项之一!

计划

基于您正在使用的Flux架构,这意味着您的商店,减少器,操作将是共享代码,以及大多数业务逻辑(内部服务或其他)以及常量和实用程序。

然后,使用React Native为每个本机平台专门编写UI层,使用React为Web编写。不仅因为有必要用React Native组件替换HTML元素,而且因为组件在移动应用程序上可能会有非常不同的行为。

一些一般准则/建议

  • 考虑一个好的架构和代码结构,以便尽可能多地共享代码(和应用程序逻辑)。尝试分离UI表示组件(对于每个平台将是不同的)。

  • 看看吧 JavaScript环境细节 在React Native文档中。使用React Native时,您将在两个环境中运行JavaScript代码:

    • 在iOS模拟器和设备上,Android模拟器和设备。 React Native使用JavaScriptCore,它是为Safari提供支持的JavaScript引擎。在iOS上,由于iOS应用程序中缺少可写的可执行内存,因此JSC不使用JIT。
    • 使用Chrome调试时,它会运行Chrome中的所有JavaScript代码,并通过WebSocket与本机代码进行通信。所以你使用的是V8。

    虽然两种环境非常相似,但最终可能会出现一些不一致的情况。

  • 考虑共享代码的不同策略。为了访问共享代码,您正在构建的应用程序不必全部存在于相同的代码库或git存储库中。

    更现实的是,您将分别托管两个或更多项目,因此npm包是在它们之间共享代码的最简单方法之一。

    这很容易,因为创建一个新包并将其设置为每个项目中的依赖项。对于共享项目的路径,您可以使用git存储库而不是指向npm上的公共包。

    即使您现在只构建Web应用程序, 你可以花一些时间思考如何概括一些共享代码,因此将来重新使用它会更容易。


12
2017-12-16 19:21



这很好地回答了这个问题,但是重新使用ReactJs代码进行移动而不是重写一堆东西有什么问题? - Martin Dawson
谢谢。这绝对有帮助 - ps.
@MartinMazzaDawson是不可能的,因为Web和移动的渲染代码是不同的。相反,网络就像 <div> 要么 <span>在移动设备上我们使用React Native组件 <View>, <Text> 和其他代表移动特定项目的内置组件。 - Kaloyan Kosev


这是可能的,可行的。你必须拥有每个平台(web / android / ios)的视图,因为每个平台都有你的组件..

业务逻辑必须不在视图之内。使用flux可以使您的项目更容易使用native,因为它将api交互移动到数据层,让视图只是一个视图。


1
2017-12-18 12:11