如何从共享组件文件夹导入不同的应用程序?react / react-native

IT技术 javascript reactjs react-native import
2021-05-02 02:02:48

我目前正在做一个项目,我们必须制作 2 个移动应用程序。我们决定使用 react-native 构建这些应用程序,以便我们可以利用跨平台功能。

然后我们概述了项目结构。两款App的UI设计中,大部分组件都一模一样,只是颜色有所变化。

所以这就是为什么我们决定两个应用程序都必须从一个文件夹导入(灵活)组件

项目结构

- mobile
    - project 1
    - project 2

必须看起来像下面两个解决方案之一

- components
- mobile
    - project 1
    - project 2

或者

- mobile
    - components
    - project 1
    - project 2

'

问题

因此,当我尝试从项目 1 或 2 外部导入组件时会出现问题。例如,我创建了一个可用于两个项目(应用程序)的加载组件。但是这个组件使用了一个第三方库,这个库需要安装 Pod 来安装一些额外的库。

问题:

  1. 我应该在哪里安装第三方库(纱线添加)。在文件夹组件中,还是在两个项目文件夹中?
  2. 如果我将它安装在 components 文件夹中,我将无法运行 Pod install,因为该项目目录中没有添加任何内容。
  3. 如果我尝试从项目目录外的 components 文件夹中导入组件,则会收到“无法解析module..”错误。

我认为 react-native 并不鼓励我们应该从项目目录之外导入组件,因此会出现错误。但是,我仍然希望它起作用,因此它会更好地组织并且更有效。

有人在此类领域有经验吗?我该如何解决这个问题?可能的解决方案是什么

我已经阅读了其他 StackOverflow 帖子,但仍然无法弄清楚。我还不清楚。

1个回答

如果您想在两个独立项目之间共享组件,常见的解决方案是创建您自己的 NPM 库,如 jmargolisvt 在他们的评论中所建议的那样。

但是,它会增加一些开销来发布对组件库的更改。如果您需要快速移动,您可以通过直接从 Github 安装来将组件库安装到您的项目中。有关此npm install语法的信息,请参阅 NPM 的文档https : //docs.npmjs.com/cli/install

无论哪种方式,您的结构最终都如下所示,您将能够像导入任何其他 npm module一样导入共享组件。

app-ios
  - depends on app-component-library
app-android
  - depends on app-component-library
app-component-library