react-native ¿cómo importar el directorio raíz del proyecto?

Solución:

Alias ​​en React Native
Hay un punto en el que tendrá varios archivos y carpetas en su proyecto. Y necesitamos obtener la referencia de un archivo de otro en cualquier posibilidad aleatoria. Si estamos siguiendo la ruta relativa como

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

entonces es realmente muy difícil para nosotros tener una idea de a dónde lleva el símbolo ‘../ ‘y en un proyecto más complejo esto es una pesadilla.

En este post encontraremos la posible solución y alternativa sobre este tipo de escenarios. Tomemos un proyecto de ejemplo con la siguiente estructura de carpetas.

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

Tenemos dos posibles soluciones para señalar cada nodo en la estructura de carpetas anterior.

Utilice @providesModule (actualizar: no funcionará para las versiones RN 56 y superiores. https://github.com/facebook/react-native/issues/21152)

Una solución secundaria que funcionaría pero es menos “segura” es usar @providesModule en su archivo. Esto viene con menos repetición, pero dado que se basa en el propio caso de uso interno de Facebook, podría cambiar según su capricho interno. Puede leer más sobre esto aquí: https: //github.com/facebook/fbjs

Para usarlo, debe incluir este comentario en la parte superior de su archivo:

/**
 * @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>
 );
 }
}

Entonces puedes importarlo igual que arriba:

import themes from 'login';

Utilice babel-plugin-module-alias

Un complemento de babel para reescribir (mapear, alias, resolver) directorios como directorios diferentes durante el proceso de Babel. Es particularmente útil cuando tiene archivos que no desea usar con rutas relativas (especialmente en proyectos grandes).

Usos:

Instalar babel cli

npm install --g babel-cli

Instale babel-plugin-module-alias.

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

Cree un archivo .babelrc en el directorio raíz o agregue una clave babel: el package.json de su proyecto y agregue las siguientes líneas de código.

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

y finalmente borre la caché y reinicie el servidor de nodo

 npm start -- --reset-cache

El código fuente completo se puede descargar desde aquí

usar babel-plugin-module-alias

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

crear un .babelrc archivo para el directorio raíz del proyecto.

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

comando de inicio:

   npm start -- --reset-cache

Ahora podemos hacer lo siguiente:

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

Usar babel-plugin-module-resolver.

Las respuestas existentes eran extensas, obsoletas y lo hacían mucho más complicado de lo necesario. Me sentí obligado a agregar una respuesta sucinta para ayudar a los demás.

1. Instale el paquete:

   npm install --save-dev --save-exact babel-plugin-module-resolver
   

2. Modificar o crear un .babelrc archivo en su directorio raíz con lo siguiente:

   {
     "plugins": [
       [ "module-resolver", { "root": ["./"] } ] 
     ]
   }
   

   Tu puedes cambiar ./ a la raíz de tu código, como ./application o algo.

3. Actualiza tu import caminos:

   En lugar de escribir:

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

   Puedes escribir esto:

   import themes from 'config/themes';
   

4. ¡Lucro!

---

---

Utiliza Nuestro Buscador