React Native的組件開(kāi)發(fā)一直處在一個(gè)比較尷尬的處境。在官方未給予相關(guān)示例與腳手架的情況下，社區(qū)中依然誕生了許許多多的React Native組件。因?yàn)槿鄙偈纠c規(guī)范，很多組件庫(kù)僅含有一個(gè)index.js文件。這種基礎(chǔ)的目錄結(jié)構(gòu)也導(dǎo)致了一些顯而易見(jiàn)的問(wèn)題，例如“如何測(cè)試”，“如何預(yù)覽”，“如何開(kāi)發(fā)”......本文將為各位提供一種React Native組件開(kāi)發(fā)的示例目錄結(jié)構(gòu)及相關(guān)配置指南。

示例目錄結(jié)構(gòu)

. ├── src │ └── index.js ├── test │ └── index.test.js ├── demo │ ├── .gitignore │ ├── .watchmanconfig │ ├── App.js │ ├── app.json │ ├── babel.config.js │ ├── metro.config.js │ └── package.json ├── .eslintrc.js ├── babel.config.js ├── README.md ├── .gitignore └── package.json

目錄結(jié)構(gòu)主要區(qū)分為4塊內(nèi)容根目錄，src目錄，test目錄，demo目錄。

根目錄包含了eslint配置，babel配置，README, gitignore, package.json。其中babel配置與package.json中的依賴定義是為了運(yùn)行測(cè)試用例而存在的。

src目錄包含了當(dāng)前React Native組件的源碼，是組件開(kāi)發(fā)最主要的目錄。

test目錄包含了當(dāng)前React Native組件的測(cè)試相關(guān)代碼。

demo目錄包含了一個(gè)獨(dú)立的Expo項(xiàng)目，其中App.js文件是開(kāi)發(fā)組件示例最主要文件，其中會(huì)引用src目錄中提供的組件來(lái)進(jìn)行開(kāi)發(fā)與展示。該目錄的配置詳情會(huì)在下文中繼續(xù)展開(kāi)。

為什么用Expo來(lái)進(jìn)行開(kāi)發(fā)與展示？

Expo是一個(gè)基于React Native包裹的React Native應(yīng)用開(kāi)發(fā)框架。許多React Native的開(kāi)發(fā)者對(duì)于Expo依然持懷疑態(tài)度。不可否認(rèn)的是用Expo來(lái)開(kāi)發(fā)React Native應(yīng)用確實(shí)存在一些問(wèn)題，例如：

• 引入Expo SDK后，應(yīng)用體積過(guò)大的問(wèn)題
• 缺乏應(yīng)用在后臺(tái)運(yùn)行的能力
• ...

但是絕大多數(shù)Expo的弊端是我們?cè)诮M件開(kāi)發(fā)中不會(huì)遇到或者可以避開(kāi)的，那么隨之而來(lái)的便是Expo的優(yōu)點(diǎn)：

• 快速安裝與上手
• 快速在網(wǎng)頁(yè)、模擬器、實(shí)機(jī)上預(yù)覽或測(cè)試
• 與React Native的無(wú)縫兼容性

相信開(kāi)發(fā)過(guò)React Native的同學(xué)一定會(huì)抱怨它沉重的依賴安裝，與繁瑣的調(diào)試過(guò)程，而Expo正好輕量化了這兩個(gè)過(guò)程，不僅加速了我們的組件開(kāi)發(fā)與預(yù)覽，也在我們的組件目錄中去除了Native端相關(guān)的代碼，輕量化了我們的目錄結(jié)構(gòu)。

相關(guān)配置指南

引入Expo

為組件項(xiàng)目引入Expo可能沒(méi)有聽(tīng)上去這么容易，因?yàn)槲覀冊(cè)谏衔牡哪夸浗Y(jié)構(gòu)中將src目錄定義成與demo目錄平行的目錄結(jié)構(gòu)，這就導(dǎo)致了metro（React Native打包工具）的默認(rèn)配置將無(wú)法正常打包demo目錄中的React Native代碼。為了解決這個(gè)問(wèn)題，我們就需要手動(dòng)去調(diào)整metro的配置文件，而metro配置文檔又以“精簡(jiǎn)”著稱，于是配置metro便成了一個(gè)極大的困難點(diǎn)。

準(zhǔn)備工作

首先我們需要安裝Expo CLI工具

$ npm install -g expo-cli

在組件庫(kù)的根目錄中運(yùn)行

$ expo init demo

然后選擇

• blank template
• managed workflow

你便在demo目錄中生成了一個(gè)可運(yùn)行的Expo項(xiàng)目， 可以通過(guò)運(yùn)行以下命令來(lái)預(yù)覽當(dāng)前的Expo項(xiàng)目

$ cd demo $ yarn start

配置metro

舊版本metro通常使用rn-cli.config.js作為配置文件名，而新版本則使用metro.config.js作為配置文件名。舊版本metro的配置文件格式也與新版本有較大的差別。本文將重點(diǎn)關(guān)注新版本metro的配置。

在demo目錄中創(chuàng)建名為metro.config.js的metro配置文件，并在Expo的應(yīng)用配置文件app.json中添加如下字段用于重置項(xiàng)目根目錄配置與注入自定義的metro配置文件

"packagerOpts": {"projectRoots": "","config": "metro.config.js" }

在metro.config.js中添加如下內(nèi)容

const path = require('path'); const blacklist = require('metro-config/src/defaults/blacklist'); const escapeRegexString = require('escape-regex-string');module.exports = {resolver: {blacklistRE: blacklist([new RegExp(`^${escapeRegexString(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$`,),]),providesModuleNodeModules: ['react-native','react','prop-types',],extraNodeModules: {'@babel/runtime': path.resolve(__dirname, 'node_modules/@babel/runtime'),},},projectRoot: path.resolve(__dirname),watchFolders: [path.resolve(__dirname, '..'),], };

來(lái)仔細(xì)解析一下上面的配置項(xiàng)

• providesModuleNodeModules: 該配置項(xiàng)為當(dāng)前項(xiàng)目提供額外的providesModule路徑解析名。providesModule簡(jiǎn)單來(lái)說(shuō)就是一個(gè)提供文件路徑別名的手段。例如在一個(gè)文件頭部添加如下的注釋，你就可以在項(xiàng)目別處通過(guò)import test from 'test'直接引入該文件。

  /**

*/ ```

在這里我們將注入在src目錄中被引用的三個(gè)庫(kù)react-native, react, prop-types，使得src目錄中的引用能正確被metro解析。

• extraNodeModules: 該配置旨在為當(dāng)前項(xiàng)目提供額外引入的模塊，配置格式為[{ 模塊名 : 路徑 }]。我們?cè)谶@里配置src目錄中需要的額外模塊，例如運(yùn)行測(cè)試時(shí)所需要的@babel/runtime模塊。
• blackListRE: 配置一個(gè)正則，打包時(shí)忽略掉正則匹配到的路徑。在這里我們將根目錄中的node_modules路徑下的所有內(nèi)容忽略，目的是因?yàn)樵诟夸浵碌膎ode_modules中會(huì)存在與demo目錄下node_modules中相同的庫(kù)，例如react-native, react, prop-types。這就會(huì)使得providesModule在解析時(shí)產(chǎn)生重名，從而導(dǎo)致jest-haste-map報(bào)錯(cuò)。
• projectRoot: 配置項(xiàng)目的根目錄。
• watchFolders: 為項(xiàng)目引入除projectRoot外額外的目錄，在這里我們將上層的根目錄加入metro的關(guān)注列表。

配置完metro，即可在App.js中引入src目錄中的組件

import React from 'react'; import { StyleSheet, View } from 'react-native'; import Component from '../src';const App = () => (<View style={styles.container}><Component /></View> );const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#fff',alignItems: 'center',justifyContent: 'center',}, });export default App;

現(xiàn)在運(yùn)行yarn start，就能順利看到你的組件在Expo中展示了。

小結(jié)

本文主要提供了一種React Native組件的目錄結(jié)構(gòu)，與“如何在一個(gè)React Native組件工程中引入一個(gè)含Expo工程的子目錄”的相關(guān)配置指南。這里還需要需要說(shuō)明的一點(diǎn)是，React Native組件的目錄結(jié)構(gòu)可以有千萬(wàn)種，本文只是提供一種可行的思路供大家參考，如有更好的方案也歡迎交流與學(xué)習(xí)。本文將重點(diǎn)放在了引入Expo的配置指南上，如需查看該目錄結(jié)構(gòu)的所有文件配置，請(qǐng)轉(zhuǎn)至Github。

相關(guān)

• react-native-component-cli - 快速生成該目錄結(jié)構(gòu)的腳手架工具
• react-native-hsv-color-picker - 基于該目錄結(jié)構(gòu)的組件案例

總結(jié)

以上是生活随笔為你收集整理的React Native组件开发指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。