ReactNative之解决文件导入路径问题

前言

眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.

如果喜欢我的文章，可以关注我微博:袁峥Seemygo

ReactNative之解决文件导入路径问题

RN文件路径问题

• 在RN开发中，可能相对于原生iOS开发最麻烦的，就是导入自定义的组件
• iOS中，导入自定义类，直接导入头文件就好了，不需要关心路径
• RN中，每次导入自定义组件，都需要描述该组件的相对路径，这个比较浪费时间

解决RN文件路径问题

• ReactNative提供了一个关键字@providesModule，可以解决文件路径问题，以后只要有这个关键字，导入组件就可以不需要路径，直接类名就好了

• @providesModule使用

• 在文件的顶部，嵌套一个多行注释，把@providesModule放在注释里,@providesModule后添加类名,以后就直接使用类名就能导入了。

• 注意点，带有@providesModule的多行注释，一定要是文件的第一个多行注释。

/**
 * @providesModule Common
 */

import {
    Dimensions
} from 'react-native';

export default class Common {

    static bgColor = 'rgb(232,232,232)';

    static screenW = Dimensions.get('window').width;

    static screenH = Dimensions.get('window').height;
}

• 外界使用Common

// 以前需要这样
// import Common from './../Common/Common'

// 现在可以直接用类名
import Common from 'Common'

使用@providesModule注意点

• 前端在设计时候引入路径是必要的。可以很明确文件位置，无论调试还是维护，都知道这个文件来源。如果全部通过非路径导入，等想找这个文件的时候，就不知道这个文件在哪。
• 当然也能解决，使用cmd+shirt+o就能快速查找文件
• 所以，只有在公用率较高的模块，并未开发者知道这些模块是如何产生的情况下，再去使用。
• 这种方式，只能在RN这种环境下用，不能用于前端的项目。

@providesModule原理

• RN在打包脚本的时候会检测该类型文件，并在整个项目文件查找到对应文件替换成对应的模块代码。打出来的包还是跟导入相对路径是一样的。