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