如何使用 node.js 管理公共代码 - 从 react-native 的角度来看

Question

之前我认为react-native 的目标之一是能够跨多个平台重用大量代码。我读的越多，似乎情况并非如此（或主要情况之一）。我想要实现的是这样的项目结构：

project
    +- app
      +- components
    +- android
    +- ios
    +- web

app/components 包含我们编写的大部分常用代码，这些代码可以被 android/ios（来自 react-native）重用，web 是一个 Spring boot 项目，可以使用来自app/components 的东西以及 react-native-web 打包一个可以托管在 web 上的 JS。

假设我想创建一个我想在任何地方使用的布局：

import {View, Text} from 'react-native'

class MyView extends Component {
    render() {
        return (
            <View><Text>Welcome!</Text></View>
        );
    }
}

我假设react-native 将根据需要从特定项目中的node_modules 加载（react-native-web 用于web 和react-native 用于ios/android）。

现在，如何在所有三个项目中导入这个创建的视图？我不确定这是否是最好的项目结构。这样做的正确方法是什么？ app 是否应该拥有自己的 package.json？即使它支持，我也不相信 npm 支持子项目以及 gradle 支持（我知道，苹果与橘子的比较，但我不认为像 gulp/webpack 这样的构建系统也支持，如果我错了，请纠正我）。

编辑

所以我对此进行了一些实验。问题是我不能有以下结构：

project
    app
    android
    ios
    web
       package.json
    package.json

如果在web/package.json 和package.json 中有任何常见的包，我会收到一个Duplicate module name: AutoFocusUtils，可能来自node-haste（这似乎是在 facebook 构建的一些 dep 管理系统）。

另外，由于某种原因，当从 webpack 构建 web 时，不知何故需要我在 app 的上下文中拥有 babel-preset-* 和 react-native 依赖项，这仍然很好，我想我可以解决这个问题稍后。

所以我稍微移动了一下：

project
    app
        package.json
    native
        android
        ios
        index.android.js
        index.ios.js
        package.json
    web
        package.json

一切都很好，但是从index.android.js，我不能再这样做了：

import MyView from './../app/myview'

我在电话中收到一条错误消息，提示为 Requiring unknown module ./../app/myview。但是，它在 web 中运行良好（使用 webpack 构建时）。我的 webpack.config 以防万一：http://pastebin.com/RzmWDgFe

编辑

我终于找到了一个令我们满意的代码结构。如果有人来这里寻找可行的解决方案：http://git.nomadly.in/rohan/react-native-tri-platform-starter

Answer 1

你是对的；代码重用是一个主要卖点。你可能知道 react native 打包器使用 .ios.js 或 .android.js 文件结尾来确定要加载的版本。因此，恕我直言，构建代码的最佳方法是使用web、android、ios 建议的结构，仅包括平台的特定文件（HTML、Xcode 项目等）和所有反应组件在应用程序/组件目录中。为了实现最佳重用，您应该编写独立于系统的顶级组件（以及所有其他可能的组件），并包含最小的组件（例如 Headline、FullscreenImage 等），然后这些组件依赖于平台。