将反应应用程序与反应本机应用程序合并

Posted 2023-02-22

【中文标题】将反应应用程序与反应本机应用程序合并

【英文标题】：Merge react app with react native app

【发布时间】：2018-01-15 14:32:58

【问题描述】：

我想将 React 应用文件放入 React Native 应用中。

我使用React Native Web 在 React 应用程序中支持 React Native 组件。

最后一步我想将所有文件从 React App 文件夹放到 React Native App 文件夹中。

区别在于Package.json

反应包.json：

  "name": "appname",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.10"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  

React Native Package.json：

    "name": "appname",
    "version": "0.0.1",
    "private": true,
    "scripts": 
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    ,
    "dependencies": 
        "react": "16.0.0-alpha.12",
        "react-native": "0.47.1",
        "react-native-windows": "0.47.0-rc.5"
    ,
    "devDependencies": 
        "babel-jest": "20.0.3",
        "babel-preset-react-native": "2.1.0",
        "jest": "20.0.4",
        "react-test-renderer": "16.0.0-alpha.12",
        "rnpm-plugin-windows": "^0.2.7"
    ,
    "jest": 
        "preset": "react-native"
    

那么我可以将这两个包合并在一起吗？

【问题讨论】：

我现在使用github.com/react-everywhere/re-start/tree/react-16

【参考方案1】：

对于您的原生应用，您可以使用 React Native 中的 package.json，无需合并。本机应用程序中不需要“react-dom”和类似的库。如果你的组件都来自 React Native for Web，那么在 native 上运行它们是没有问题的。

【讨论】：

我想合并，这样原生和网络都可以工作，而不仅仅是原生。

正如您在脚本中看到的那样，web 中的“start”与原生脚本不同

第一个问题你会发现不同版本的 react: "react": "^15.6.1" 和 "16.0.0-alpha.12"，你可以尝试用 16- 运行它们beta，接缝 React Native for Web 现在支持它github.com/necolas/react-native-web/issues/364我还没有尝试过。在我的项目中，我有不同的文件夹“app”（包含本机应用程序）和“web”，它们都有不同的 node_modules 并共享位于“app”文件夹中的 src 文件

关于脚本，如“start”，可以将web one重命名为“start-web”

只有少数几个只用于 web，比如“react-dom”，react native 根本不会导入它们，它们只会安装在 node_modules 中，但不会被 react 使用native，它们将被用于 web 的 react native 使用。所以这不应该增加移动构建的大小。