在 React、React-Native 和 Electron 之间共享代码

Question

我正在尝试为在网络、桌面和本机应用程序之间共享代码的所有平台构建一个项目。有谁有使用 React、React-Native、Electron 和 WebPack 设置跨平台代码共享的经验，并且知道一些资源/示例来帮助我开始实现这一目标？

目录结构可能如下所示：

/resources (fonts, images)
/config (webpack config)
/fastlane (android + ios build/deployment)
/android (auto generated by expo or create-react-native-app maybe?)
/ios (auto generated by expo or create-react-native-app maybe?)
/web
/desktop
/src (components, styles, pages, routes, App.js, etc... all shared)
index.js

我计划使用如下脚本运行和构建每个平台：

/package.json

"scripts": {
  "ios": "react-native run-ios",
  "android": "react-native run-android",
  "desktop": "electron .",
  "web": "webpack-dev-server --open",
  "build: "webpack",
  "desktop-build": "electron-builder --config config/electron.config.js",
  "ios-build": "fastlane ios build",
  "android-build": "fastlane android build"
}

设置这个 webpack 配置似乎是最困难的部分。我什至不确定如何初始化这个项目。我对网络使用自定义 webpack 设置，但从未使用过 React-native。我可以使用 create-react-native-app 或 expo 初始化这个项目，然后弹出并写入 expo/web 配置吗？

就反应代码而言，我认为它会非常简单。

它可以将react-native用于每个平台上使用react-native和react-native-web的所有JSX。

/index.js

AppRegistry.registerComponent('App', () => App);

组件中的每个文件都可以通过命名具有特定于平台的代码：

index.js
index.native.js (ios + android)
index.ios.js
index.android.js
index.desktop.js

这应该启用这样的路由：

/index.js
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';

/index.native.js
import {
  NativeRouter as Router,
  Switch,
  Route
} from 'react-router-native';

/App.js
import {
  Router,
  Switch,
  Route
} from './router';

export default App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={WhateverPage} />
      </Switch>
    </Router>
  )
}

很想听听其他开发人员对此的一些想法和经验！