React Native组件开发指南
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目录
平行的目录结构,这就导致了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 = () => (<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 - 基于该目录结构的组件案例
React Native组件开发指南相关推荐
- React Native布局详细指南
本文出自<React Native学习笔记>系列文章. 一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Nati ...
- beeshell —— 开源的 React Native 组件库
背景 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
- React Native组件的结构和生命周期
React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导 ...
- React Native组件(四)TextInput组件解析
相关文章 React Native探索系列 React Native组件系列 1 概述 TextInput组件和Text组件类似,内部都没有使用FlexBox布局,不同的是TextInput组件支持文 ...
- React Native 移动开发入门与实战
课程简介 本课程主要讲解 React 的基础知识及应用案例,包括 props.state.生命周期函数等,样式和 Flex 布局,React Native 内置的 API 和 UI 组件介绍.路由.状 ...
- 【苹果家庭推iiMessage】React Native举行开发仍是iOS,用原生的代码实现类似webview的页面
推荐内容IMESSGAE相关 作者推荐内容 iMessage苹果推软件 *** 点击即可查看作者要求内容信息 作者推荐内容 1.家庭推内容 *** 点击即可查看作者要求内容信息 作者推荐内容 2.相册 ...
- 手把手教React Native实战开发视频教程 干货
手把手教React Native实战开发视频教程[更新到70集啦...] ================================ 由于360云盘关闭,作者已经将资源迁移.需要的朋友请访问一下 ...
- React Native 一:开发环境搭建
在学习React Native的过程中,相信对于一个App开发工程师,没有充分的学习过前端开发技术的同学来说,顺利的搭建好开发环境还是比较纠结的. 下面,我就根据我自己学习过程中的总结,跟大家讲解讲解 ...
- React native RN 开发实例
多入口加载方式 React Native 混合开发多入口加载方式 - 知乎 initialProperties 官方文档:React Navigation moduleName 案例:GitHub - ...
最新文章
- 生态环境部:提升5.5亿居民饮用水环境安全保障水平
- Flutter控件--Switch 和 SwitchListTile
- 解题报告(十八)数论题目泛做(Codeforces 难度:2000 ~ 3000 + )
- js改变css样式_React 中使用CSS的7种方法
- cmake (4)引用子目录的库
- WebBrowser提交submit后界面不刷新的解决办法
- php 期望参数1为资源,php – imagesx()期望参数1是资源,给定布尔值
- 力扣-628 三个数的最大乘积
- 推荐 20 款 IDEA 主题!
- 国产数据库及厂商介绍
- Work breakdown structure 简介
- 重量级ORM框架--持久化框架Hibernate【关系映射详解】
- Python中的sys.argv是什么含义
- 【JVM】最全笔记(黑马+尚硅谷+张龙整合笔记)
- 计算机上u盘变成快捷方式,win7系统U盘文件都变成快捷方式的解决方法
- 从头搭建DVWA平台
- spark xgboost 特征重要性分析 gain、cover、freq
- torch的Conv1D
- 液晶面板里面有些什么配件_液晶电视核心部件各类液晶面板介绍是什么?请生意经的朋友帮忙解答...
- 计网必会:UDP差错检测,检验和、可靠数据传输原理