react-native how to import project root directory?

Question

App  |-- application       |-- config        |    |-- themes.js       |    |-- redux.js       +-- views       |    |-- login       |    |    |-- login.js         |-- index.js 

index.js

.... import themes from './config/themes'; import themes from './config/redux'; ... 

login.js

.... import themes from '../../config/themes'; import themes from '../../config/redux'; ... 

I hope it like this:

.... import themes from '@root/application/config/themes'; import themes from '@root/application/config/redux'; import ... from '@root/...'; ... 

if methods of php

$root = 'User/React-Native-Project/'; include $root.'/application/config/themes.php'; 

This can improve the development efficiency and avoid the wrong path and other issues.my english is not good.

Answer 1

Alias in React Native There is a point where you will have multiple files and folder in your project. And we need to get the reference of one file from another in any random possibilities. If we are following the relative path such as

import themes from '../../config/themes'; 

then it’s really very hard for us to get an idea where it takes by the symbol ‘../ ‘ and in more complex project this is a night mare.

In this post we will find the possible solution and alternative on this type of scenario. Let’s take an example project with following folder structure.

Your App Root Directory  |-- app       |-- component        |    |-- login       |    |   |-- login.js       +-- resources       |    |-- icon       |    |    |-- userupload.png    |-- index.ios.js  |-- index.android.js 

We have two possible solution to point each node in the above folder structure.

Use @providesModule (update: will not work for RN versions 56 and above. https://github.com/facebook/react-native/issues/21152)

A secondary solution that would work but is less “safe”, is to use @providesModule in your file. This comes with less boilerplate but since it’s based on Facebook’s own internal use case, it could change based on their internal whim. You can read more about it here:https://github.com/facebook/fbjs

To use it you need to include this comment at the top of your file:

/**  * @providesModule login  */  import React, { Component } from 'react'; import {  AppRegistry,  StyleSheet,  Text,  View } from 'react-native';  export default class login extends Component{  render(){  return(  <View>  <Text> this is login page  </Text>  </View>  );  } } 

Then you can import it the same as above:

import themes from 'login'; 

Use babel-plugin-module-alias

A babel plugin to rewrite (map, alias, resolve) directories as different directories during the Babel process. It’s particularly useful when you have files you don’t want to use with relative paths (especially in big projects).

Uses:

Install babel cli

npm install --g babel-cli 

Install babel-plugin-module-alias.

$ npm install --save babel babel-plugin-module-alias

Create a file .babelrc in root directory or add a key babel: your project’s package.json and add following lines of code.

"babel":{   "plugins": [[     "module-alias", [       { "src": "./app", "expose": "app" },       { "src": "./app/resources/icon", "expose": "icon" }       ]    ]]  } 

and finally clear the cache and restart the node server

 npm start -- --reset-cache 

Full source code can be downloaded from here

Answer 2

use babel-plugin-module-alias

npm install --save babel babel-plugin-module-alias 

create a .babelrc file for project root directory.

{   "presets": [     "react-native"   ],   "plugins": [     ["babel-plugin-module-alias", [       { "src": "./application", "expose": "app" }     ]]   ] } 

start command:

   npm start -- --reset-cache 

Now we can do the:

.... import themes from 'app/config/themes'; import themes from 'app/config/redux'; import ... from 'app/...'; ...