摘要：的組件開發(fā)一直處在一個(gè)比較尷尬的處境。目錄包含了當(dāng)前組件的源碼，是組件開發(fā)最主要的目錄。許多的開發(fā)者對于依然持懷疑態(tài)度。

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

.
├── 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)行測試用例而存在的。

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

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

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

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

引入Expo SDK后，應(yīng)用體積過大的問題

缺乏應(yīng)用在后臺(tái)運(yùn)行的能力

...

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

快速安裝與上手

快速在網(wǎng)頁、模擬器、實(shí)機(jī)上預(yù)覽或測試

與React Native的無縫兼容性

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

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

準(zhǔn)備工作

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

$ npm install -g expo-cli

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

$ expo init demo

然后選擇

blank template

managed workflow

你便在demo目錄中生成了一個(gè)可運(yùn)行的Expo項(xiàng)目， 可以通過運(yùn)行以下命令來預(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, ".."),
  ],
};

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

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

/**

*/
```

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

extraNodeModules: 該配置旨在為當(dāng)前項(xiàng)目提供額外引入的模塊，配置格式為[{ 模塊名 : 路徑 }]。我們在這里配置src目錄中需要的額外模塊，例如運(yùn)行測試時(shí)所需要的@babel/runtime模塊。

blackListRE: 配置一個(gè)正則，打包時(shí)忽略掉正則匹配到的路徑。在這里我們將根目錄中的node_modules路徑下的所有內(nèi)容忽略，目的是因?yàn)樵?b>根目錄下的node_modules中會(huì)存在與demo目錄下node_modules中相同的庫，例如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 = () => (
  
    
  
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default App;

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

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

react-native-component-cli - 快速生成該目錄結(jié)構(gòu)的腳手架工具

react-native-hsv-color-picker - 基于該目錄結(jié)構(gòu)的組件案例