Taro跨端开发之让Taro UI支持React Native

Taro UI 不支持RN的窘境

Taro UI 文档上很早就说明会有可能支持rn了,但是快一年多了,因为taro ui团队人力的问题一直没有兼容到rn.

业务紧迫,我们等不到那一天了.自己动手丰衣足食.

Taro 传统组件打包在RN上的问题

一般来说,组件库打完包之后 dist/index.js文件会是这样的.

根据运行时的环境变量区分是否要引入哪一个组件库.

if (process.env.TARO_ENV === 'weapp') {
      module.exports = require('./weapp/ui')
      module.exports.default = module.exports
    } else if (process.env.TARO_ENV === 'h5') {
      module.exports = require('./h5/ui')
      module.exports.default = module.exports
    } else {
      module.exports = require('./weapp/ui')
      module.exports.default = module.exports
    }

理想模式下,只要加入一个rn的环境判断,就可以做到rn组件库的引入了.

if (process.env.TARO_ENV === 'weapp') {
      module.exports = require('./weapp/ui')
      module.exports.default = module.exports
    } else if (process.env.TARO_ENV === 'h5') {
      module.exports = require('./h5/ui')
      module.exports.default = module.exports
    } else if (process.env.TARO_ENV === 'rn') {
      // 理想模式,只需要加这一段
      module.exports = require('./rn/ui')
      module.exports.default = module.exports
    } else {
      module.exports = require('./weapp/ui')
      module.exports.default = module.exports
    }

可是现实不是这样的,rn如果引入组件库的索引文件,是dist/index.js,他会提前把所有端的代码全部预执行一遍.

代码还没有真正运行,就因为其他端的代码不兼容,直接报错了. 所以这样硬核的引入方法是不可行的.

rn组件库代码与其他端代码完全隔离

ui.js文件的改动

在src下边有一个ui.js文件,大致内容是这样的:

import Taro from '@tarojs/taro'
import './style/index.scss'
export { default as AActionSheet } from './components/action-sheet'
export { default as AActionSheetItem } from './components/action-sheet/body/item'
export { default as AText } from './components/text'
export { default as AToast } from './components/toast'
export { default as AButton } from './components/button'

// 其他组件...

为了更好的在原来组件库上做rn的兼容,利用taro可以根据文件后缀名区分端的特性就排上用场了. 需要新建一个ui.rn.js

内容与作用跟ui.js基本上一致,唯一的区别在于, from 的路径,有的组件后面页需要加上rn后缀.

import Taro from '@tarojs/taro'
import './style/index.scss'

export { default as AActionSheet } from './components/action-sheet/index.rn'
export { default as AActionSheetItem } from './components/action-sheet/body/item/index.rn'
export { default as AText } from './components/text'
export { default as AToast } from './components/toast/index.rn'  // 针对rn兼容的组件
export { default as AButton } from './components/button/index'  // 各端都兼容的组件

组件库索引文件的改动

普通情况下,rn打包完之后会生成一个 rn_temp文件夹,这里面就是纯粹的rn代码. 这里面的代码完全不用像其他端一样生成到dist目录.

我的组件库索引文件,也就是packages.json里面的main指向一个rn组件库专属的索引文件就可以了.

我这里命名为: main.rn.js rn的组件库索引文件:

"use strict";
module.exports = require('./rn_temp/ui.rn.js');
module.exports.default = module.exports

其他端的话就指向dist目录就好了 h5与各种小程序端

"use strict";
module.exports = require('./dist/index');
module.exports.default = module.exports

组件库打包与发布

小程序与h5端的组件库还是按照原来的打包与发布模式. 但是rn端的话,需要在发布的时候修改一下package.json内容.

我这里提供一个简单的发布脚本:

const { execSync } = require('child_process');
const fse = require('fs-extra');
const path = require('path');

// 升级一下版本号
execSync("npm version patch");
const pkgPath = path.relative(process.cwd(),'package.json')
var packageData = fse.readJsonSync(pkgPath);
// h5 小程序组件库

console.log("开始构建小程序组件库")
packageData.name = 'taro-ui'
packageData.main = 'main.js'
fse.outputJsonSync(pkgPath, packageData,{spaces:2});
execSync(`npm run build:component && crgt publish;`);


// 修改一下npm包名,重新发布一个包
console.log("开始构建rn组件库")
packageData.name = 'taro-ui-rn'
packageData.main = 'rn_temp/ui.rn.js'
fse.outputJsonSync(pkgPath, packageData,{spaces:2});
execSync('npm run build:rn && crgt publish;');

// 还原名字
packageData.name = 'taro-ui'
packageData.main = 'main.js'
fse.outputJsonSync(pkgPath, packageData,{spaces:2});
execSync('git push');

在这里你应该发现了,我发布组件库的时候,是发布两个npm包.

作为强迫症的你,不要太在意这些. 因为taro很多的依赖也是这样干的.

如何使用这样的组件库

在业务开发的时候,代码只要直接引入 taro-ui这个npm包就好了,

但是如果是rn业务该怎么办呢?

这里我们借鉴taro处理官方依赖的方式,在代码编译时将 taro-ui 替换包名 taro-ui-rn就可以了.

所以我们需要简单的修改一下taro的源码. 我们用的1.3.X版本,如果是更高的版本,应该可以有其他方式修改.

在1.3.x的版本中,我们需要修改tarojs/cli的代码.

在cli中的rn模块有一个 transformJS文件, 在这个文件搜索一下 source.value = PACKAGES['@tarojs/components-rn'],找到这行代码的位置.

这段代码的意思大概就是,在遍历ast的时候,如果引入的包名为@tarojs/components将其替换成为 @tarojs/components-rn.

所以我们按照一样的逻辑,多加一行else if

else if (value === PACKAGES['@tarojs/components']) {
    source.value = PACKAGES['@tarojs/components-rn']
// 加上下一段判断
}else if (value === 'taro-ui') {
  source.value = 'taro-ui-rn'
}

这样,我们就可以正常开发的情况下引入正确的npm包了.