×
广告

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

96
袁峥
2017.05.23 16:10* 字数 563

前言

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