@vnmf/components-react

@vnmf/components-react

Vnmf 组件库（React 版本）。

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

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

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

使用方法

Vnmf 项目

本特性还没发布，需要 link 到本地使用。

1. 下载 Vnmf 仓库，切换分支

git clone https://github.com/vnpaycode/vnmf.git
cd vnmf
git checkout components-compat

2. 安装、编译

yarn
yarn run bootstrap
yarn run build

3. 把相关依赖 link 到全局

cd packages/vnmf-webpack-runner
npm link
cd ../packages/vnmf-loader
npm link
cd ../packages/vnmf-components-react
npm link

项目

1. 设置项目配置 h5.useHtmlComponents

// config/index.js
module.exports = {
  h5: {
    useHtmlComponents: true
  }
}

2. 把相关依赖 link 到本地

npm link @vnmf/webpack-runner
npm link @vnmf/vnmf-loader
npm link @vnmf/components-react

3. 开始编译

vnmf build --type h5 --watch

改造方法

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

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

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

组件需要修改的地方有：

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

修改引用入口、rollup 配置

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

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

修改 rollup 配置，添加 input：

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

编译组件库

cd vnmf/packages/vnmf-components-react
npm run dev

# 完成后重新刷新浏览器即可