@wakeda/taro-components-react

Taro 组件库（React 版本）。

@tarojs/components 使用了基于 Web Components 的 Stencil 框架进行开发，于部分手机会出现兼容性问题：

• 多行文字截断失效
• 部分安卓机（OV 居多），样式 visibility 切换失败导致页面白屏

因此开发者可以使用此包对 React 框架的 H5 组件库进行替代，来提高兼容性。

使用方法

1. 设置项目配置 h5.useHtmlComponents

// config/index.js
module.exports = {
  h5: {
    // 注意：暂时关闭，等所有组件迁移过来之后开启
    useHtmlComponents: true,
    // 设置 alias
    webpackChain(config) {
      config.resolve.alias.set(
        '@tarojs/components$',
        '@wakeda/taro-components-react/index'
      );
      console.log(config.resolve.alias);
    },
  },
};

改造方法

目前只适配了 View、Text、Swiper 组件，开发者可以根据使用到的组件按以下改造方法进行适配：

拷贝 Taro v2 的对应组件，进行修改

从这里拷贝 Taro2 的对应组件到 taro/packages/taro-components-react/src/components 目录下。

组件需要修改的地方有：

1. 把 Nerv 相关的引用修改为 react
2. 文件改为 .tsx，增加 Typings（可选）

修改引用入口、rollup 配置

在入口文件增加组件的导出：

// taro-components/react/index
export { xxxx } from './dist/xxx';

修改 rollup 配置，添加 input：

// taro-components/rollup.config.js
export default {
  input: {
    'xxx/index': 'src/components/xxx/index.[jsx|tsx]',
  },
};

编译组件库

cd taro/packages/taro-components-react
npm run dev
# 完成后重新刷新浏览器即可