前言
眼看很多公司都開始嘗試使用ReactNative,達到跨平臺開發(fā)，最近也寫了很多文章，希望讓更多想了解的同學(xué)快速上手ReactNative.
如果喜歡我的文章，可以關(guān)注我微博:袁崢Seemygo
ReactNative之解決文件導(dǎo)入路徑問題
RN文件路徑問題
- 在RN開發(fā)中，可能相對于原生iOS開發(fā)最麻煩的，就是導(dǎo)入自定義的組件
- iOS中，導(dǎo)入自定義類，直接導(dǎo)入頭文件就好了，不需要關(guān)心路徑
- RN中，每次導(dǎo)入自定義組件，都需要描述該組件的相對路徑，這個比較浪費時間
解決RN文件路徑問題
ReactNative提供了一個關(guān)鍵字@providesModule，可以解決文件路徑問題，以后只要有這個關(guān)鍵字，導(dǎo)入組件就可以不需要路徑，直接類名就好了
@providesModule使用
在文件的頂部，嵌套一個多行注釋，把
@providesModule放在注釋里,@providesModule后添加類名,以后就直接使用類名就能導(dǎo)入了。注意點，帶有@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'
// 現(xiàn)在可以直接用類名
import Common from 'Common'
使用@providesModule注意點
- 前端在設(shè)計時候引入路徑是必要的。可以很明確文件位置，無論調(diào)試還是維護，都知道這個文件來源。如果全部通過非路徑導(dǎo)入，等想找這個文件的時候，就不知道這個文件在哪。
- 當(dāng)然也能解決，使用cmd+shirt+o就能快速查找文件
- 所以，只有在公用率較高的模塊，并未開發(fā)者知道這些模塊是如何產(chǎn)生的情況下，再去使用。
- 這種方式，只能在RN這種環(huán)境下用，不能用于前端的項目。
@providesModule原理
- RN在打包腳本的時候會檢測該類型文件，并在整個項目文件查找到對應(yīng)文件替換成對應(yīng)的模塊代碼。打出來的包還是跟導(dǎo)入相對路徑是一樣的。
