前言
眼看很多公司都开始尝试使用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在打包脚本的时候会检测该类型文件，并在整个项目文件查找到对应文件替换成对应的模块代码。打出来的包还是跟导入相对路径是一样的。
