做网站的语言,不建网站网络营销怎么做,怎么以公司名义注册邮箱,哪些网站是单页面应用程序React Native的组件开发一直处在一个比较尴尬的处境。在官方未给予相关示例与脚手架的情况下#xff0c;社区中依然诞生了许许多多的React Native组件。因为缺少示例与规范#xff0c;很多组件库仅含有一个index.js文件。这种基础的目录结构也导致了一些显而易见的问题#… React Native的组件开发一直处在一个比较尴尬的处境。在官方未给予相关示例与脚手架的情况下社区中依然诞生了许许多多的React Native组件。因为缺少示例与规范很多组件库仅含有一个index.js文件。这种基础的目录结构也导致了一些显而易见的问题例如“如何测试”“如何预览”“如何开发”......本文将为各位提供一种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后应用体积过大的问题缺乏应用在后台运行的能力...但是绝大多数Expo的弊端是我们在组件开发中不会遇到或者可以避开的那么随之而来的便是Expo的优点 快速安装与上手快速在网页、模拟器、实机上预览或测试与React Native的无缝兼容性相信开发过React Native的同学一定会抱怨它沉重的依赖安装与繁琐的调试过程而Expo正好轻量化了这两个过程不仅加速了我们的组件开发与预览也在我们的组件目录中去除了Native端相关的代码轻量化了我们的目录结构。 相关配置指南 引入Expo 为组件项目引入Expo可能没有听上去这么容易因为我们在上文的目录结构中将src目录定义成与demo目录平行的目录结构这就导致了metroReact Native打包工具的默认配置将无法正常打包demo目录中的React Native代码。为了解决这个问题我们就需要手动去调整metro的配置文件而metro配置文档又以“精简”著称于是配置metro便成了一个极大的困难点。 准备工作 首先我们需要安装Expo CLI工具 $ npm install -g expo-cli 在组件库的根目录中运行 $ expo init demo 然后选择 blank templatemanaged 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 () (View style{styles.container}Component //View
);const styles StyleSheet.create({container: {flex: 1,backgroundColor: #fff,alignItems: center,justifyContent: center,},
});export default App; 现在运行yarn start就能顺利看到你的组件在Expo中展示了。 小结 本文主要提供了一种React Native组件的目录结构与“如何在一个React Native组件工程中引入一个含Expo工程的子目录”的相关配置指南。这里还需要需要说明的一点是React Native组件的目录结构可以有千万种本文只是提供一种可行的思路供大家参考如有更好的方案也欢迎交流与学习。本文将重点放在了引入Expo的配置指南上如需查看该目录结构的所有文件配置请转至Github。 相关 react-native-component-cli - 快速生成该目录结构的脚手架工具 react-native-hsv-color-picker - 基于该目录结构的组件案例
