支持把 Taro 组件编译为 React Native 组件

[biorz]

• 提案时间: (2022-05-30)
• 影响版本: (3.x)

概述

把 Taro 组件编译为支持原生 React-native 运行的组件。

动机

适用于存在原生 RN 项目的场景（区别于 Taro RN ），通过将 Taro 组件编译为原生 RN 组件，使非 Taro 的 RN 项目也可以直接使用，提高组件的复用性。

在长时间的开发中，往往会积累大量的业务组件。希望可以借助 Taro，通过组件级别的复用进一步降低多端开发成本。

使用方式

a. 在全局配置 app.config.js 中声明组件入口

  export default {
    pages: ['pages/index/index'],
    components: {
      // 声明组件入口
      'components/navbar',
      'components/place-picker'
  } 
}

b. 使用命令编译组件

默认输出路径为 dist, 你可以将组件发布到 npm, 或者 copy 到项目中使用。

taro build native-components --type rn

c. 使用组件

你可以在 react native 项目中直接使用组件的编译产物。

import React from 'react'
import { View } from 'react-native'
import PlacePicker from '../dist/place-picker'

export default function () {
  return (
    <View>
      <PlacePicker
        show
        placeData={regionData}
        confirm={(res) => console.log(res)}
      />
    </View>
  )
}

默认情况下，我们将 @tarojs/components-rn，@tarojs/taro-rn 等依赖包作为 external，你需要在项目中额外安装它们。

yarn add @tarojs/components-rn @tarojs/taro-rn

配置项

详细配置

你可以在编译配置 config/index.js 下的 rn.nativeComponent 下进行详细的配置，如

// config/index.ts
module.exports = function(merge) {
  return merge({
    rn: {
      nativeComponents: {
        // external: [/react-native/],
        // exteranlResolve: (importee, importer) => importee,
        // output: 'dist',
        // modifyRollupConfig: (config, innerPlugins) => config
      }
    }
  })
}

external

Type: Array<string | RegExp> | (arr: Array<string | RegExp>) => Array<string | RegExp>

Default: [/^react(\/.*)?$/, /^react-native(\/.*)?$/, /^@react-native/]

设置外部依赖

exteranlResolve

Type: (importee: string, importer: string) => string

Default: importee => !importee.match(/^\.?\.\//) && !path.isAbsolute(importee)? importee : null,

设置外部依赖，如果返回 string, 则将该值作为 external， 我们默认将 node_modules 路径下的文件设置为外部依赖。

output

Type: string

Default: dist

组件输出路径，相对于执行命令的 process.cwd()

modifyRollupConfig

Type: (config: RollupOptions, innerPlugins: { taroResolver: typeof taroResolver, styleTransformer: typeof styleTransformer }) => RollupOptions

Default: config => config

我们使用 rollup 打包组件，对于大多数场景您无需修改配置。如果您需要自定义一些打包参数，可以通过该选项修改 rollupConfig。

我们暴露了用于处理 Taro 语法的插件，您可以使用 innerPlugins 中的插件自行组合您的逻辑。

• taroResolve: 用于处理文件的平台后缀 (如 .rn, .weapp), 及 alias

• styleTransformer: 用于处理 .scss, .css 等文件

详细设计

要使 Taro 组件支持在原生 RN 项目中运行，需要在编译过程中剥离 Taro 的语法，该过程可以复用现有的 Taro RN 实现方式。

整体实现考虑使用 Rollup 进行打包，在 @tarojs/rn-runner 中实现对新命令的支持。

需要实现以下 Rollup 插件，插件复用现有 Taro RN 逻辑。

• Resolver - @tarojs/rn-support
• Transformer - babel-preset-taro-rn
• StyleTransformer - @tarojs/taro-rn-style-transformer

缺陷

• 组件不支持部分 Taro Api， 如 Taro.navigate，Taro.getCurrentPages 等。

替代选择

N/A

适配策略

• 新增的命令参数，不影响现有打包编译流程，无需适配

[Yaolin-BeRich]

useful