在React和React Native中导入路径差异

Question

I am trying to share logic components between a React appliacation and a React Native application with a similar structure as shown below:

-source
 |-appLogic
   |-logicComponent1.js
   |-logicComponent2.js
   |-moreAppLogic
     |-moreLogic.js
 |-appviews
   |-reactView.js
   |-reactNativeView.js

I have a problem during the import of modules in the logic components. The reactView.js will import the logic components like this:

import {moreLogic} from "appLogic/moreAppLogic/moreLogic.js"

whereas the reactNativeView.js will import the same file like this:

import {moreLogic} from "../appLogic/moreAppLogic/moreLogic.js"

My problem arises in the case of moreLogic.js importing for example logicComponent1. Since react, in the moreLogic.js, will want something like this:

import {logicComponent1} from "appLogic/logicComponent1.js"

and react-native will want:

import {logicComponent1} from "../logicComponent1.js"

I have tried to do the import in moreLogic.js both ways but if I do it the react way, the native app cant find the file and vice versa..

Is there a way to go around this problem?? I cannot change the file structure, that is really not an option.

Answer 1

put package.json file in source/appLogic with the following content:

{
  "name": "appLogic"
}

After that you can use import {moreLogic} from "appLogic/moreAppLogic/moreLogic.js" in both react js and react native