$ cnpm install @tarojs/components-react
Taro 组件库(React 版本)。
@tarojs/components 使用了基于 Web Components 的 Stencil 框架进行开发,于部分手机会出现兼容性问题:
visibility 切换失败导致页面白屏因此开发者可以使用此包对 React 框架的 H5 组件库进行替代,来提高兼容性。
本特性还没发布,需要 link 到本地使用。
git clone https://github.com/NervJS/taro.git
cd taro
git checkout components-compat
yarn
yarn run bootstrap
yarn run build
cd packages/taro-webpack-runner
npm link
cd ../packages/taro-loader
npm link
cd ../packages/taro-components-react
npm link
h5.useHtmlComponents// config/index.js
module.exports = {
h5: {
useHtmlComponents: true
}
}
npm link @tarojs/webpack-runner
npm link @tarojs/taro-loader
npm link @tarojs/components-react
taro build --type h5 --watch
目前只适配了 View、Text、Swiper 组件,开发者可以根据使用到的组件按以下改造方法进行适配:
从这里拷贝 Taro2 的对应组件到 taro/packages/taro-components-react/src/components 目录下。
组件需要修改的地方有:
Nerv 相关的引用修改为 react.tsx,增加 Typings(可选)在入口文件增加组件的导出:
// 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
# 完成后重新刷新浏览器即可
从当前版本起,组件库支持在主包打包的同时,自动生成每个组件独立的样式产物,并采用新的产物结构:
import '@tarojs/components-react/dist/components/picker/react-style/style.css';
import '@tarojs/components-react/dist/components/button/react-style/style.css';
// 其它组件同理
@import '~@tarojs/components-react/dist/components/picker/react-style/style.css';
@import '~@tarojs/components-react/dist/components/button/react-style/style.css';
/* 其它组件同理 */
dist/components/{组件名}/react-style/style.css 路径下。dist/components/picker/react-style/style.cssdist/components/button/react-style/style.cssrollup.config.mjs 的 styleBundles input 里添加入口文件即可。Copyright 2013 - present © cnpmjs.org | Home |