搭建一个RN组件库

最新推荐文章于 2024-08-01 13:45:06 发布

develop_csdn_LGQ

最新推荐文章于 2024-08-01 13:45:06 发布

阅读量2.3k

点赞数

分类专栏： React Native 文章标签： react.js react native javascript

本文链接：https://blog.csdn.net/develop_csdn/article/details/121640924

版权

React Native 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.开始搭建空白组件

搭建一个组件最好的方法就是本地测试通过后上传到私有库，然后再安装到app上发布上架。

但是我们这是一个全局基础组件，所以不可能每个功能都写一个组件，这样的话我们需要把全局基础组件整成一个集合，但是我们的全局基础组件库也会依赖别的三方组件。这样就产生了下面的组件库结构

└── react-native-xxxxxx
    ├── README.md
    ├── android
    │   ├── build.gradle
    │   └── src
    │       └── main
    │           ├── AndroidManifest.xml
    │           └── java
    │               └── com
    │                   └── reactlibrary
    │                       ├── RNCardviewModule.java
    │                       └── RNCardviewPackage.java
    ├── index.js
    ├── ios
    │   ├── RNCardview.h
    │   ├── RNCardview.m
    │   ├── RNCardview.podspec
    │   ├── RNCardview.xcodeproj
    │   │   └── project.pbxproj
    │   └── RNCardview.xcworkspace
    │       └── contents.xcworkspacedata
    └── package.json

上面的代码和图片是我们生成的一个空白的组件，使用的快接生成方式是：react-native-create-library，使用的命令：

react-native-create-library xxxxxx

当然你要先把组件react-native-create-library优先在本地全局安装才能正确使用。

上面生成好组件项目后，就可以开始编写实现代码了

2.本地代码测试

使用yarn link的方式

cd 组件名
yarn link
cd 项目名
yarn link 组件名

yarn link是把当前目录中的本地代码用yarn注册为xxxxxx的一个本地组件，组件名字xxxxxx其实是根据package.json中的name字段的值来的，跟目录名无关，只不过这里正好等于目录名
yarn link xxxx:命令是把这个本地组件xxxxxxx安装到了项目中，你可以在项目的node_modules中找到这个组件
其实yarn link这种方式简单来说，就是做了一个symbol link，也就是说，example/node_modules/xxxxxx/目录中的内容是指向xxxxxxx/目录内容，你改动xxxxxxx/目录下的代码，相当于直接改动项目中/node_modules/xxxxxxx/这个目录中的代码，这样就能够达到边修改组件代码边看效果的目的了

3.写好的组件的配置

1.package.json文件

package.json文件定义了发布的所有信息，包括：组件名、版本、作者、描述、依赖等等关键信息。具体可以参照 Working with package.json

{
  "name": "xxxxxx",
  "version": "1.0.0",
  "description": "A ReactNative xxxxx Component for android and iOS",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "react-native",
    "react-component",
    "react-native-component",
  ],
  "author": {
    "name": "xxxxx",
    "email": "xxxxxx"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "xxxxxx"
  },
  "devDependencies": {
    "react": "^16.2.0",
    "react-native": "^0.63.3"
  },
  "peerDependencies": {
    "react": "^16.2.0"
  },
  "dependencies": {
    "prop-types": "^15.6.0"
  }
}

我们需要使用的第三方组件是写在peerDependencies的配置里面,最后发布即可