@tarojs/components-react NPM

@tarojs/components-react

Taro 组件库（React 版本）。

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

多行文字截断失效
部分安卓机（OV居多），样式 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

// 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
# 完成后重新刷新浏览器即可

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

2 months ago

3 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

2 months ago

2 months ago

3 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

2 months ago

3 months ago

2 months ago

5 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

6 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

10 months ago

11 months ago

9 months ago

11 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

12 months ago

9 months ago

9 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

10 months ago

12 months ago

12 months ago

11 months ago

9 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

10 months ago