如何从共享的组件文件夹中导入不同的应用程序?反应/本机 [英] How can different apps import from a shared components folder? react / react-native

问题描述

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

I'm currently working on a project where we have to make 2 mobile apps. We decided to build those apps with react-native, so we can take advantage of the cross platform functionality.

然后，我们概述了项目结构.在这两个应用程序的UI设计中，大多数组件完全相同，只是颜色有所变化.

Then we outlined the project structure. In the UI design of both apps, most of the components are exactly the same, but only a change in color.

这就是我们决定两个应用程序都必须从一个文件夹导入(灵活)组件的原因.

So that's why we've decided that both apps must import (flexible) components from one folder.

项目结构

- mobile
    - project 1
    - project 2

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

- components
- mobile
    - project 1
    - project 2

或

- mobile
    - components
    - project 1
    - project 2

'

问题

因此，当我尝试从项目1或2外部导入组件时，就会出现问题.例如，我创建了一个可用于两个项目(应用程序)的Loading组件.但是此组件使用第三方库，并且该库需要Pod安装才能安装一些其他库.

So the problem occurs when I try to import the components from outside either the project 1 or 2. For example, I created a Loading component usable for both projects (apps). But this component uses a third-party library, and that library requires a Pod install, to install some additional libraries.

问题:

1. 我应该在哪里安装第三方库(纱线添加).在文件夹组件中，还是在两个项目文件夹中?
2. 如果将其安装在components文件夹中，则由于该项目目录中未添加任何内容，因此无法运行Pod安装.
3. 如果我尝试从位于项目目录外部的components文件夹中导入组件，则会收到无法解析模块.."错误.

我认为react-native并不鼓励我们从项目目录外部导入组件，因此会出现错误.但是，我仍然希望它能正常工作，这样才能更好地组织起来并提高效率.

I think that react-native is not encouraging that we should import components from outside the project directory, hence the error. But still, I want this to work, so it would be better organised and way more efficient.

有人在这种领域有经验吗?如何解决此问题?有什么可能的解决方案.

Does someone have experience in this type of field? How can a I solve this issue? What are the possible solution(s).

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

推荐答案

如果要在两个离散项目之间共享组件，常见的解决方案是按照jmargolisvt的评论中的建议创建自己的NPM库.

If you want to share the components between two discrete projects, the common solution is to create your own NPM library as jmargolisvt suggests in their comment.

但是，将更改发布到组件库中会增加一些开销.如果您需要快速移动，则可以通过直接从Github进行安装来将组件库安装到项目中.有关以下内容的 npm install 语法，请参见NPM的文档: https://docs.npmjs.com/cli/install

It will add a bit of overhead to publishing changes to your component library though. If you need to move fast, you can install you component library into your project by installing directly from Github for example. See NPM's docs for the npm install syntax for this: https://docs.npmjs.com/cli/install

无论哪种方式，您的结构最终都将如下所示，并且您将能够像其他npm模块一样导入共享组件.

Either way, your structure ends up look like the below, and you'll be able to import your shared components as you would any other npm module.

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

这篇关于如何从共享的组件文件夹中导入不同的应用程序?反应/本机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！