react-native 如何导入项目根目录? [英] react-native how to import project root directory?

问题描述

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';
...

登录.js

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

我希望它是这样的:

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

php的if方法

$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.

推荐答案

React Native 中的别名在某一点上，您的项目中将有多个文件和文件夹.我们需要以任何随机的可能性从另一个文件中获取一个文件的引用.如果我们遵循相对路径，例如

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.

使用@providesModule(更新:不适用于 RN 56 及更高版本.https://github.com/facebook/react-native/issues/21152)

一个可行但不太安全"的辅助解决方案是在您的文件中使用@providesModule.这带有较少的样板，但由于它基于 Facebook 自己的内部用例，它可能会根据他们的内部心血来潮而改变.您可以在此处阅读更多相关信息:https://github.com/facebook/fbjs

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';

使用 babel-plugin-module-alias

一个 babel 插件，用于在 Babel 过程中将(映射、别名、解析)目录重写为不同的目录.当您不想使用相对路径的文件时(尤其是在大型项目中)，它特别有用.

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).

用途:

安装 babel cli

Install babel cli

npm install --g babel-cli

安装 babel-plugin-module-alias.

Install babel-plugin-module-alias.

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

在根目录下创建一个.babelrc文件或者添加一个关键的babel:你项目的package.json并添加以下几行代码.

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

完整的源代码可以从这里

这篇关于react-native 如何导入项目根目录?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！