ReactNative组件开辟指南

React Native的组件开辟一向处在一个比较为难的处境。在官方未赋予相干示例与脚手架的情况下，社区中依旧诞生了许很多多的React Native组件。由于缺少示例与范例，很多组件库仅含有一个index.js文件。这类基本的目次构造也致使了一些不言而喻的题目，比方“怎样测试”，“怎样预览”，“怎样开辟”&＃8230;&＃8230;本文将为列位供应一种React Native组件开辟的示例目次构造及相干设置指南。

示例目次构造

.
├── 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

目次构造重要区分为4块内容根目次，src目次，test目次，demo目次。

根目次包括了eslint设置，babel设置，README, gitignore, package.json。个中babel设置与package.json中的依靠定义是为了运转测试用例而存在的。

src目次包括了当前React Native组件的源码，是组件开辟最重要的目次。

test目次包括了当前React Native组件的测试相干代码。

demo目次包括了一个自力的Expo项目，个中App.js文件是开辟组件示例最重要文件，个中会援用src目次中供应的组件来举行开辟与展现。该目次的设置概况会在下文中继续睁开。

为什么用Expo来举行开辟与展现？

Expo是一个基于React Native包裹的React Native运用开辟框架。很多React Native的开辟者关于Expo依旧持怀疑态度。不可否认的是用Expo来开辟React Native运用确切存在一些题目，比方：

• 引入Expo SDK后，运用体积过大的题目
• 缺少运用在背景运转的才能
• &＃8230;

然则绝大多数Expo的弊病是我们在组件开辟中不会碰到或许能够避开的，那末随之而来的就是Expo的长处：

• 疾速装置与上手
• 疾速在网页、模拟器、实机上预览或测试
• 与React Native的无缝兼容性

置信开辟过React Native的同砚一定会埋怨它极重的依靠装置，与烦琐的调试历程，而Expo恰好轻量化了这两个历程，不仅加快了我们的组件开辟与预览，也在我们的组件目次中去除了Native端相干的代码，轻量化了我们的目次构造。

相干设置指南

引入Expo

为组件项目引入Expo能够没有听上去这么轻易，由于我们在上文的目次构造中将src目次定义成与demo目次平行的目次构造，这就致使了metro（React Native打包东西）的默许设置将没法一般打包demo目次中的React Native代码。为了处理这个题目，我们就须要手动去调解metro的设置文件，而metro设置文档又以“精简”著称，因而设置metro便成了一个极大的困难点。

准备工作

起首我们须要装置Expo CLI东西

$ npm install -g expo-cli

在组件库的根目次中运转

$ expo init demo

然后挑选

• blank template
• managed workflow

你便在demo目次中天生了一个可运转的Expo项目， 能够经由过程运转以下敕令来预览当前的Expo项目

$ cd demo
$ yarn start

设置metro

旧版本metro一般运用
rn-cli.config.js作为设置文件名，而新版本则运用
metro.config.js作为设置文件名。旧版本
metro的设置文件花样也与新版本有较大的差异。本文将重点关注新版本
metro的设置。

在demo目次中建立名为metro.config.js的metro设置文件，并在Expo的运用设置文件app.json中增加以下字段用于重置项目根目次设置与注入自定义的metro设置文件

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

在metro.config.js中增加以下内容

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, '..'),
],
};

来细致剖析一下上面的设置项

• providesModuleNodeModules: 该设置项为当前项目供应分外的providesModule途径剖析名。providesModule简朴来讲就是一个供应文件途径别号的手腕。比方在一个文件头部增加以下的解释，你就可以够在项目别处经由过程import test from 'test'直接引入该文件。

  /**

*/
```

在这里我们将注入在src目次中被援用的三个库react-native, react, prop-types，使得src目次中的援用能准确被metro剖析。

• extraNodeModules: 该设置旨在为当前项目供应分外引入的模块，设置花样为[{ 模块名 : 途径 }]。我们在这里设置src目次中须要的分外模块，比方运转测试时所须要的@babel/runtime模块。
• blackListRE: 设置一个正则，打包时疏忽掉正则匹配到的途径。在这里我们将根目次中的node_modules途径下的一切内容疏忽，目标是由于在根目次下的node_modules中会存在与demo目次下node_modules中雷同的库，比方react-native, react, prop-types。这就会使得providesModule在剖析时发生重名，从而致使jest-haste-map报错。
• projectRoot: 设置项目标根目次。
• watchFolders: 为项目引入除projectRoot外分外的目次，在这里我们将上层的根目次到场metro的关注列表。

设置完metro，即可在App.js中引入src目次中的组件

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Component from '../src';
const App = () => (
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;

如今运转yarn start，就可以顺遂看到你的组件在Expo中展现了。

小结

本文重要供应了一种React Native组件的目次构造，与“怎样在一个React Native组件工程中引入一个含Expo工程的子目次”的相干设置指南。这里还须要须要申明的一点是，React Native组件的目次构造能够有千万种，本文只是供应一种可行的思绪供人人参考，若有更好的计划也迎接交换与进修。本文将重点放在了引入Expo的设置指南上，如需检察该目次构造的一切文件设置，请转至Github。

相干

• react-native-component-cli &＃8211; 疾速天生该目次构造的脚手架东西
• react-native-hsv-color-picker &＃8211; 基于该目次构造的组件案例