React Native + React (for web) 种子项目 [英] React Native + React (for web) seed project

问题描述

是否可以设置一个包含 React Native(移动应用程序)+ React(web)代码的项目，除了 UI 部分外，代码在平台之间切碎.

Is it possible to setup a project which has code for both React Native(Mobile app) + React(web), having the code shred between platforms except for the UI part.

已经使用这个种子完成了与Angular + NativeScript类似的事情，它支持代码共享本机应用程序和 Web 应用程序之间(UI 层除外).为 React + React Native 寻找类似的东西.

Have done something similar with Angular + NativeScript using this seed, which enables code sharing between native app and web application(Except for the UI layer). Looking for something similar for React + React Native.

如果您知道 React Native + Angular 的任何此类种子(如果有)，请分享.

Please share if you know any such seed for React Native + Angular as well, if available.

推荐答案

Jonathan Kaufman 有一篇关于如何设置的好文章:http://jkaufman.io/react-web-native-codesharing/

Jonathan Kaufman has a good article on how to set this up: http://jkaufman.io/react-web-native-codesharing/

基本策略是为每个平台(android/ios/web)设置不同的入口点(index.js).然后，您的大部分非渲染代码可以位于共享的 app 或 common 文件夹中.不过，您仍然需要隔离渲染代码(即使用 View、div 等)，因为这会因平台而异.

The basic strategy is to have a different entry point (index.js) for each platform (android/ios/web). Then the majority of your non-rendering code can live in a shared app or common folder. You'll still need to segregate your rendering code (i.e. uses of View, div, etc.), though, as that will differ by platform.

还要注意该文章的评论，因为对这种方法的缺陷进行了一些很好的讨论.示例:

Pay attention to the comments on that article as well, as there's some good discussion on the pitfalls of this approach. Example:

通过在 native 和 web 之间共享一个公共 package.json，你已经通过它们的公共依赖将它们粘在一起，最重要的一个是 react.假设您升级到依赖于 >= react@16 的 react-native 版本，但是您的 Web 应用程序依赖于其他依赖于 =< 的库.反应@15.--timtas

By sharing a common package.json between native and web, you've glued them together by their common dependencies, the most important one being react. Let's say you upgrade to a version of react-native that depends on >= react@16, but your web app depends on some other library which depends on =< react@15. --timtas

这篇关于React Native + React (for web) 种子项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！