taro-ui Taro UI 支持 React native 内测版本

trafficstars

Taro UI 支持 React native内测版本

兼容涉及到操作 DOM 包括 SwipeAction 滑动操作，Accordion手风琴，Indexes索引选择器，Calendar日历四个组件未进行适配，开发者可找第三方的组件，或者贡献自己的代码。

配置

config里rn下面要加 resolve: { include: ['taro-ui'] }

动画部分

缺失动画的组件包括，SearchBar搜索栏，Tabs标签页组件，待完善。

非 React Native 部分

非 React Native 代码未进行更改，新建目录：

packages/taro-ui/rn/*
packages/taro-ui-demo-rn

快速预览

https://github.com/NervJS/taro-ui/releases

下载 taro-playground 扫一扫尝试

欢迎大家前来围观~

Jan 07 '22 10:01 shinken008

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

Jan 07 '22 10:01 taro-ui-bot[bot]

release ci bug，手动更新最新版本 [email protected]

Jan 07 '22 11:01 shinken008

支持linaria或styled-components吗？

Jan 14 '22 12:01 SidneyLann

请问RN版的组件使用方式是和之前的有什么区别么？为何我引用了AtTabs组件没有效果？

Jan 20 '22 05:01 beehoo

3.1.0-beta.2

检查版本是否有误

请问RN版的组件使用方式是和之前的有什么区别么？为何我引用了AtTabs组件没有效果？

Jan 20 '22 07:01 zhiqingchen

3.1.0-beta.2

检查版本是否有误

请问RN版的组件使用方式是和之前的有什么区别么？为何我引用了AtTabs组件没有效果？

版本是对的

Jan 20 '22 08:01 beehoo

可以看看demo

Jan 20 '22 14:01 zhiqingchen

可以看看demo

啊。。。config里rn下面要加 resolve: { include: ['taro-ui'] }

Jan 20 '22 14:01 beehoo

@zhiqingchen demo在哪里看呢

Feb 07 '22 13:02 eugle

@eugle https://github.com/NervJS/taro-ui/tree/react-native/packages/taro-ui-demo-rn

Feb 08 '22 05:02 zhiqingchen

通过模板初始化后，改几个地方即可接入

https://github.com/zhiqingchen/taro-ui-rn-demo/commit/d3a16d202945956ebb49822d310acaba70de1ecd

从脚手架模板选择 RN 创建后,
安装 taro-ui ,
config/index.js 里

{
  rn:{
      resolve: {
          include: ['taro-ui'], // 处理引用 node_modules/taro-ui 的依赖。
      },
      enableSvgTransform: true, // 处理图标
  }
}

src/app.scss 里 @import "~taro-ui/dist/style/index.scss";
页面内正常引入对应组件, 如 import { AtAvatar } from 'taro-ui' 即可

Feb 16 '22 10:02 zhiqingchen

引入taroui后，rn会这样的warn

 WARN  Constants.installationId has been deprecated in favor of generating and storing your own ID. Implement it using expo-application's androidId on Android and a storage API such as expo-secure-store on iOS and localStorage on the web. This API will be removed in SDK 44.
 WARN  Constants.deviceId has been deprecated in favor of generating and storing your own ID. This API will be removed in SDK 44.
 WARN  Constants.linkingUrl has been renamed to Constants.linkingUri. Consider using the Linking API directly. Constants.linkingUrl will be removed in SDK 44.
 WARN  Constants.manifest is null because the embedded app.config could not be read. Ensure that you have installed the expo-constants build scripts if you need to read from Constants.manifest.
 WARN  Constants.manifest is null because the embedded app.config could not be read. Ensure that you have installed the expo-constants build scripts if you need to read from Constants.manifest.

Mar 03 '22 11:03 eugle

引入taroui后，启动项目即报这样的提示

transform[stderr]: : Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
transform[stderr]: 
transform[stderr]: Recommendation: math.div($col, 12)
transform[stderr]: 
transform[stderr]: More info and automated migrator: https://sass-lang.com/d/slash-div
transform[stderr]: 
transform[stderr]:     ╷
transform[stderr]: 121 │     $width: ($col / 12) * 100%;
transform[stderr]:     │              ^^^^^^^^^
transform[stderr]:     ╵
transform[stderr]:     node_modules/taro-ui/rn/style/components/flex.scss 121:14  @import
transform[stderr]:     node_modules/taro-ui/rn/style/components/index.scss 5:10   @import
transform[stderr]:     node_modules/taro-ui/rn/style/index.scss 14:9              @import
transform[stderr]:     src/app.scss 1:9                                           root stylesheet
transform[stderr]: 
transform[stderr]: DEPRECATION WARNING
transform[stderr]: : Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
transform[stderr]: 
transform[stderr]: Recommendation: math.div($at-avatar-size-md, 2.5)
transform[stderr]: 
transform[stderr]: More info and automated migrator: https://sass-lang.com/d/slash-div
transform[stderr]: 
transform[stderr]:   ╷
transform[stderr]: 8 │   font-size: $at-avatar-size-md / 2.5;
transform[stderr]:   │              ^^^^^^^^^^^^^^^^^^^^^^^^
transform[stderr]:   ╵
transform[stderr]:     node_modules/taro-ui/rn/style/components/avatar.scss 8:14  @import
transform[stderr]:     node_modules/taro-ui/rn/style/components/index.scss 10:10  @import
transform[stderr]:     node_modules/taro-ui/rn/style/index.scss 14:9              @import
transform[stderr]:     src/app.scss 1:9                                           root stylesheet
transform[stderr]: 
transform[stderr]: DEPRECATION WARNING
transform[stderr]: : Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
transform[stderr]: 
transform[stderr]: Recommendation: math.div($at-avatar-size-lg, 2.5)
transform[stderr]: 
transform[stderr]: More info and automated migrator: https://sass-lang.com/d/slash-div
transform[stderr]: 
transform[stderr]:    ╷
transform[stderr]: 28 │     font-size: $at-avatar-size-lg / 2.5;
transform[stderr]:    │                ^^^^^^^^^^^^^^^^^^^^^^^^
transform[stderr]:    ╵
transform[stderr]:     node_modules/taro-ui/rn/style/components/avatar.scss 28:16  @import
transform[stderr]:     node_modules/taro-ui/rn/style/components/index.scss 10:10   @import
transform[stderr]:     node_modules/taro-ui/rn/style/index.scss 14:9               @import
transform[stderr]:     src/app.scss 1:9                                            root stylesheet
transform[stderr]: 
transform[stderr]: DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
transform[stderr]: 
transform[stderr]: Recommendation: math.div($at-avatar-size-sm, 2.5)
transform[stderr]: 
transform[stderr]: More info and automated migrator: https://sass-lang.com/d/slash-div
transform[stderr]: 
transform[stderr]:    ╷
transform[stderr]: 35 │     font-size: $at-avatar-size-sm / 2.5;
transform[stderr]:    │                ^^^^^^^^^^^^^^^^^^^^^^^^
transform[stderr]:    ╵
transform[stderr]:     node_modules/taro-ui/rn/style/components/avatar.scss 35:16  @import
transform[stderr]:     node_modules/taro-ui/rn/style/components/index.scss 10:10   @import
transform[stderr]:     node_modules/taro-ui/rn/style/index.scss 14:9               @import
transform[stderr]:     src/app.scss 1:9                                            root stylesheet
transform[stderr]: 
transform[stderr]: DEPRECATION 
transform[stderr]: WARNING
transform[stderr]: : Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
transform[stderr]: 
transform[stderr]: Recommendation: math.div($at-badge-dot-size, 2)
transform[stderr]: 
transform[stderr]: More info and automated migrator: https://sass-lang.com/d/slash-div
transform[stderr]: 
transform[stderr]:    ╷
transform[stderr]: 26 │     border-radius: $at-badge-dot-size / 2;
transform[stderr]:    │                    ^^^^^^^^^^^^^^^^^^^^^^
transform[stderr]:    ╵
transform[stderr]:     node_modules/taro-ui/rn/style/components/badge.scss 26:20  @import
transform[stderr]:     node_modules/taro-ui/rn/style/components/index.scss 11:10  @import
transform[stderr]:     node_modules/taro-ui/rn/style/index.scss 14:9              @import
transform[stderr]:     src/app.scss 1:9                                           root stylesheet
transform[stderr]: 
transform[stderr]: WARNING: 22 repetitive deprecation warnings omitted.
transform[stderr]: 
transform[stdout]: 
transform[stdout]: src/app.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽 [stylelint]
transform[stdout]: 
transform[stdout]: 
transform[stdout]: node_modules/taro-ui/rn/style/components/input.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽 [stylelint]
transform[stdout]: 
transform[stderr]: DEPRECATION WARNING
transform[stderr]: : Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
transform[stderr]: 
transform[stderr]: Recommendation: math.div($at-range-slider-size, 2)
transform[stderr]: 
transform[stderr]: More info and automated migrator: https://sass-lang.com/d/slash-div
transform[stderr]: 
transform[stderr]:   ╷
transform[stderr]: 6 │   padding: 0 $at-range-slider-size / 2 + 4PX;
transform[stderr]:   │              ^^^^^^^^^^^^^^^^^^^^^^^^^
transform[stderr]:   ╵
transform[stderr]:     node_modules/taro-ui/rn/style/components/range.scss 6:14  root stylesheet
transform[stderr]: 
transform[stderr]: DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
transform[stderr]: 
transform[stderr]: Recommendation: math.div(-$at-range-slider-size, 2)
transform[stderr]: 
transform[stderr]: More info and automated migrator: https://sass-lang.com/d/slash-div
transform[stderr]: 
transform[stderr]:    ╷
transform[stderr]: 37 │     margin-left: -$at-range-slider-size / 2;
transform[stderr]:    │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^
transform[stderr]:    ╵
transform[stderr]:     node_modules/taro-ui/rn/style/components/range.scss 37:18  root stylesheet
transform[stderr]: 
transform[stderr]: DEPRECATION WARNING
transform[stderr]: : Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
transform[stderr]: 
transform[stderr]: Recommendation: math.div($at-range-slider-size, 2)
transform[stderr]: 
transform[stderr]: More info and automated migrator: https://sass-lang.com/d/slash-div
transform[stderr]: 
transform[stderr]:    ╷
transform[stderr]: 40 │     border-radius: $at-range-slider-size / 2;
transform[stderr]:    │                    ^^^^^^^^^^^^^^^^^^^^^^^^^
transform[stderr]:    ╵
transform[stderr]:     node_modules/taro-ui/rn/style/components/range.scss 40:20  root stylesheet
transform[stderr]: 
transform[stdout]: 
transform[stdout]: node_modules/taro-ui/rn/style/components/countdown.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽 [stylelint]
transform[stdout]: 
transform[stdout]: 
transform[stdout]: node_modules/taro-ui/rn/style/components/range.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽 [stylelint]
transform[stdout]:

Mar 03 '22 11:03 eugle

className属性不生效，原因：className通过babel-plugin-transform-react-jsx-to-rn-stylesheet转成style属性,组件中有不使用style属性。另外为什么AtInput一定要onChange?,value不能在AtInput state控制吗？

Apr 07 '22 08:04 ksh033

AtButton在 Form也提交不了，建议属性 const { size = 'normal', type = '', circle, full, loading, disabled, customStyle, ...restProps } = this.props <Button disabled={disabled} className={classNames(rootClassName, classObject, this.props.className)} style={customStyle} // @ts-ignore hoverStyle={{ opacity: 0.6 }} loading={loading} type={type !== 'primary' ? 'default' : 'primary'} size={size === 'normal' ? 'default' : 'mini'} onClick={this.onClick.bind(this)} ...restProps >这样至少还能用

Apr 08 '22 02:04 ksh033

楼上的这个问题 https://github.com/NervJS/taro-ui/issues/1424#issuecomment-1057960026

可以参考 https://github.com/NervJS/taro-ui/issues/1462 解决。

具体就是：

# 1
yarn add patch-package postinstall-postinstall sass-migrator -D

# 2  https://github.com/NervJS/taro-ui/blob/d005a01ec22ad4bd01959c27774f11c1d7c71329/packages/taro-ui-demo-rn/src/app.scss#L1-L3
./node_modules/.bin/sass-migrator division ./node_modules/taro-ui/rn/style/components/*.scss

# 3
./node_modules/.bin/patch-package taro-ui

第二步用的是 rn/style https://github.com/NervJS/taro-ui/blob/d005a01ec22ad4bd01959c27774f11c1d7c71329/packages/taro-ui-demo-rn/src/app.scss#L1-L3

不过还剩下一点问题：

transform[stdout]: src/styles/custom-variables.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽略 [stylelint]
transform[stdout]: 
transform[stdout]: node_modules/taro-ui/rn/style/components/input.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽略 [stylelint]
transform[stdout]: 
transform[stdout]: node_modules/taro-ui/rn/style/components/range.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽略 [stylelint]
transform[stdout]: 
transform[stdout]: node_modules/taro-ui/rn/style/components/countdown.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽略 [stylelint]

May 16 '22 14:05 drizzlesconsin

楼上的这个问题 #1424 (comment)

可以参考 #1462 解决。

具体就是：

# 1
yarn add patch-package postinstall-postinstall sass-migrator -D

# 2  https://github.com/NervJS/taro-ui/blob/d005a01ec22ad4bd01959c27774f11c1d7c71329/packages/taro-ui-demo-rn/src/app.scss#L1-L3
./node_modules/.bin/sass-migrator division ./node_modules/taro-ui/rn/style/components/*.scss

# 3
./node_modules/.bin/patch-package taro-ui

第二步用的是 rn/style https://github.com/NervJS/taro-ui/blob/d005a01ec22ad4bd01959c27774f11c1d7c71329/packages/taro-ui-demo-rn/src/app.scss#L1-L3

不过还剩下一点问题：

transform[stdout]: src/styles/custom-variables.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽略 [stylelint]
transform[stdout]: 
transform[stdout]: node_modules/taro-ui/rn/style/components/input.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽略 [stylelint]
transform[stdout]: 
transform[stdout]: node_modules/taro-ui/rn/style/components/range.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽略 [stylelint]
transform[stdout]: 
transform[stdout]: node_modules/taro-ui/rn/style/components/countdown.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽略 [stylelint]

还有最后一步：

#4  yarn patch-package

最后重启 npm run dev、微信开发者工具

Jun 30 '22 02:06 Lpbzzz

新版本 3.1.0-beta.2

Aug 09 '22 02:08 zhiqingchen

安装的是 3.1.0-beta.2 , 按上面的步骤处理好config, 引入scss 之后，yarn build:rn 还是会报错

transform[stderr]: \node_modules\metro-hermes-compiler\src\e throw ex; RuntimeError: abort(SyntaxError: node_modules\taro-ui\dist\style\index.rn.scss: Call retries were exceeded). Build with -s ASd). Build with -s ASSERTIONS=1 for more info. at process.abort (xxx\node_modules\metro-hermes-compiler\src\eermes-compiler\src\emhermesc.js:402:15) at process.emit (events.js:412:35) at processPromiseRejections (internal/process/promises.js:245:33) at processTicksAndRejections (internal/process/task_queues.js:96:32)

Sep 23 '22 03:09 defolly

提供下环境信息

Sep 28 '22 09:09 shinken008

升级 sass 到 1.55.0 版本后问题解决

Sep 30 '22 01:09 defolly

BUNDLE ./index

error: src/assets/images/icon-list-basic.png: The "path" argument must be of type string. Received undefined transform[stdout]: transform[stdout]: node_modules/taro-ui/rn/style/components/avatar.scss transform[stdout]: 42:4 ⚠ 无效的 React Native 样式属性 "background-clip" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: node_modules/taro-ui/rn/style/components/input.scss transform[stdout]: 65:4 ⚠ 无效的 React Native 样式属性 "vertical-align" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: stdin transform[stdout]: 6 ⚠ ID 选择器会被 React Native 忽略 [stylelint] transform[stdout]: 10 ⚠ 通配选择器会被 React Native 忽略 [stylelint] transform[stdout]: 11:2 ⚠ 无效的 React Native 样式属性 "box-sizing" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 30:2 ⚠ 无效的 React Native 样式属性 "box-sizing" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 48:2 ⚠ 伪类选择器会被 React Native 忽略 [stylelint] transform[stdout]: 48:2 ⚠ 伪类选择器会被 React Native 忽略 [stylelint] transform[stdout]: 49:4 ⚠ 无效的 React Native 样式属性 "border-top" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 140:2 ⚠ Unexpected line-height "1.5", expect a value with units (taro-rn/line-height-no-value-without-unit) [stylelint] transform[stdout]: 143:4 ⚠ 无效的 React Native 样式属性 "content" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: src/app.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stderr]: Browserslist: caniuse-lite is outdated. Please run: transform[stderr]: npx browserslist@latest --update-db transform[stderr]: Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating transform[stderr]: Browserslist: caniuse-lite is outdated. Please run: transform[stderr]: npx browserslist@latest --update-db transform[stderr]: Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating transform[stderr]: Browserslist: caniuse-lite is outdated. Please run: transform[stderr]: npx browserslist@latest --update-db transform[stderr]: Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating transform[stderr]: Browserslist: caniuse-lite is outdated. Please run: transform[stderr]: npx browserslist@latest --update-db transform[stderr]: Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating transform[stdout]: transform[stdout]: stdin transform[stdout]: 46:4 ⚠ 无效的 React Native 样式属性 "box-sizing" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 139:2 ⚠ 无效的 React Native 样式属性 "transition" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 139:2 ⚠ 该单位会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: src/pages/panel/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stderr]: Browserslist: caniuse-lite is outdated. Please run: transform[stderr]: npx browserslist@latest --update-db transform[stderr]: Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating transform[stderr]: Browserslist: caniuse-lite is outdated. Please run: transform[stderr]: npx browserslist@latest --update-db transform[stderr]: Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating transform[stdout]: transform[stdout]: src/pages/view/article/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: stdin transform[stdout]: 2:2 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 6:2 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 11:2 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 14:4 ⚠ 无效的 React Native 样式属性 "border-left" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 15:4 ⚠ 无效的 React Native 样式属性 "border-right" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: src/pages/action/action-sheet/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: src/pages/action/activity-indicator/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: src/pages/layout/flex/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: stdin transform[stdout]: 1 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 5:2 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 9:4 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 10:6 ⚠ 无效的 React Native 样式属性 "border-left" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 13:4 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 13:4 ⚠ 伪类选择器会被 React Native 忽略 [stylelint] transform[stdout]: 18:6 ⚠ 无效的 React Native 样式属性 "border-left" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 21:4 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 21:4 ⚠ 伪类选择器会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: stdin transform[stdout]: 17:6 ⚠ 无效的 React Native 样式属性 "content" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: stdin transform[stdout]: 65:4 ⚠ 无效的 React Native 样式属性 "vertical-align" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: ../taro-ui/rn/style/components/input.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: ../taro-ui/rn/style/components/countdown.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: ../taro-ui/rn/style/components/range.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: BUNDLE ./index

error: src/assets/images/icon-list-form.png: The "path" argument must be of type string. Received undefined transform[stdout]: transform[stdout]: stdin transform[stdout]: 46:4 ⚠ 无效的 React Native 样式属性 "box-sizing" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 139:2 ⚠ 无效的 React Native 样式属性 "transition" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 139:2 ⚠ 该单位会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: src/pages/panel/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: src/pages/view/article/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: src/pages/action/activity-indicator/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: src/pages/action/action-sheet/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: stdin transform[stdout]: 2:2 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 6:2 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 11:2 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 14:4 ⚠ 无效的 React Native 样式属性 "border-left" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 15:4 ⚠ 无效的 React Native 样式属性 "border-right" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: src/pages/layout/flex/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: node_modules/taro-ui/rn/style/components/avatar.scss transform[stdout]: 42:4 ⚠ 无效的 React Native 样式属性 "background-clip" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: node_modules/taro-ui/rn/style/components/input.scss transform[stdout]: 65:4 ⚠ 无效的 React Native 样式属性 "vertical-align" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: stdin transform[stdout]: 6 ⚠ ID 选择器会被 React Native 忽略 [stylelint] transform[stdout]: 10 ⚠ 通配选择器会被 React Native 忽略 [stylelint] transform[stdout]: 11:2 ⚠ 无效的 React Native 样式属性 "box-sizing" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 30:2 ⚠ 无效的 React Native 样式属性 "box-sizing" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 48:2 ⚠ 伪类选择器会被 React Native 忽略 [stylelint] transform[stdout]: 48:2 ⚠ 伪类选择器会被 React Native 忽略 [stylelint] transform[stdout]: 49:4 ⚠ 无效的 React Native 样式属性 "border-top" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 140:2 ⚠ Unexpected line-height "1.5", expect a value with units (taro-rn/line-height-no-value-without-unit) [stylelint] transform[stdout]: 143:4 ⚠ 无效的 React Native 样式属性 "content" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: src/app.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: stdin transform[stdout]: 65:4 ⚠ 无效的 React Native 样式属性 "vertical-align" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: ../taro-ui/rn/style/components/input.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: ../taro-ui/rn/style/components/countdown.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: ../taro-ui/rn/style/components/range.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: stdin transform[stdout]: 1 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 5:2 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 9:4 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 10:6 ⚠ 无效的 React Native 样式属性 "border-left" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 13:4 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 13:4 ⚠ 伪类选择器会被 React Native 忽略 [stylelint] transform[stdout]: 18:6 ⚠ 无效的 React Native 样式属性 "border-left" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 21:4 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 21:4 ⚠ 伪类选择器会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: stdin transform[stdout]: 17:6 ⚠ 无效的 React Native 样式属性 "content" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: y a info Reloading app... n

p a t c h

p a c k a g e

BUNDLE ./index

error: src/assets/images/icon-list-form.png: The "path" argument must be of type string. Received undefined transform[stdout]: transform[stdout]: stdin transform[stdout]: 46:4 ⚠ 无效的 React Native 样式属性 "box-sizing" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 139:2 ⚠ 无效的 React Native 样式属性 "transition" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 139:2 ⚠ 该单位会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: src/pages/panel/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: src/pages/view/article/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: src/pages/action/action-sheet/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: src/pages/action/activity-indicator/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: stdin transform[stdout]: 2:2 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 6:2 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 11:2 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 14:4 ⚠ 无效的 React Native 样式属性 "border-left" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 15:4 ⚠ 无效的 React Native 样式属性 "border-right" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: src/pages/layout/flex/index.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: stdin transform[stdout]: 65:4 ⚠ 无效的 React Native 样式属性 "vertical-align" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: ../taro-ui/rn/style/components/input.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: ../taro-ui/rn/style/components/countdown.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: ../taro-ui/rn/style/components/range.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: node_modules/taro-ui/rn/style/components/avatar.scss transform[stdout]: 42:4 ⚠ 无效的 React Native 样式属性 "background-clip" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: node_modules/taro-ui/rn/style/components/input.scss transform[stdout]: 65:4 ⚠ 无效的 React Native 样式属性 "vertical-align" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: stdin transform[stdout]: 6 ⚠ ID 选择器会被 React Native 忽略 [stylelint] transform[stdout]: 10 ⚠ 通配选择器会被 React Native 忽略 [stylelint] transform[stdout]: 11:2 ⚠ 无效的 React Native 样式属性 "box-sizing" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 30:2 ⚠ 无效的 React Native 样式属性 "box-sizing" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 48:2 ⚠ 伪类选择器会被 React Native 忽略 [stylelint] transform[stdout]: 48:2 ⚠ 伪类选择器会被 React Native 忽略 [stylelint] transform[stdout]: 49:4 ⚠ 无效的 React Native 样式属性 "border-top" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 140:2 ⚠ Unexpected line-height "1.5", expect a value with units (taro-rn/line-height-no-value-without-unit) [stylelint] transform[stdout]: 143:4 ⚠ 无效的 React Native 样式属性 "content" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: transform[stdout]: src/app.scss transform[stdout]: 1:1 ⚠ @-rule 会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: stdin transform[stdout]: 1 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 5:2 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 9:4 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 10:6 ⚠ 无效的 React Native 样式属性 "border-left" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 13:4 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 13:4 ⚠ 伪类选择器会被 React Native 忽略 [stylelint] transform[stdout]: 18:6 ⚠ 无效的 React Native 样式属性 "border-left" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]: 21:4 ⚠ 组合选择器会被 React Native 忽略 [stylelint] transform[stdout]: 21:4 ⚠ 伪类选择器会被 React Native 忽略 [stylelint] transform[stdout]: transform[stdout]: transform[stdout]: stdin transform[stdout]: 17:6 ⚠ 无效的 React Native 样式属性 "content" (taro-rn/css-property-no-unknown) [stylelint] transform[stdout]:

Nov 19 '22 03:11 tianlinzx

AtIcon is not working since the svg files can not be parsed by react native seamlessly.

Nov 30 '22 05:11 Leslie-Wong-H

AtIcon is not working since the svg files can not be parsed by react native seamlessly.

config/index.js

{
  rn:{
    resolve: {
      include: ['taro-ui'], // 处理引用 node_modules/taro-ui 的依赖。
    },
    enableSvgTransform: true, // 处理图标
  }
}

Nov 30 '22 05:11 zhiqingchen

Thanks. Please correct this. 'enableSvgTransform' is not inside 'resolve'.

通过模板初始化后，改几个地方即可接入

zhiqingchen/taro-ui-rn-demo@d3a16d2

从脚手架模板选择 RN 创建后,

安装 taro-ui ,

config/index.js 里 rn:{ resolve: { include: ['taro-ui'], // 处理引用 node_modules/taro-ui 的依赖。 enableSvgTransform: true, // 处理图标 }, }

src/app.scss 里 @import "~taro-ui/dist/style/index.scss";

页面内正常引入对应组件, 如 import { AtAvatar } from 'taro-ui' 即可

Nov 30 '22 16:11 Leslie-Wong-H

"@tarojs/taro-rn": "3.5.3-aplha.1",
"taro-ui": "^3.1.0-beta.4",

[email protected] 支持 taro 哪个版本？

企业微信截图_16756707409164

Feb 06 '23 08:02 Sloth9527

用 3.4 试试？

Feb 09 '23 07:02 shinken008

引入 [email protected] 并按照上边修改之后，yarn build:rn 报错

$ yarn build:rn
yarn run v1.22.19
$ cross-env NODE_ENV=production taro build --type rn
👽 Taro v3.6.5

                Welcome to Metro v0.72.3
              Fast - Scalable - Integrated


transform[stdout]:
transform[stdout]: node_modules/taro-ui/rn/style/components/range.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽略 [stylelint]
transform[stdout]:
transform[stdout]: node_modules/taro-ui/rn/style/components/countdown.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽略 [stylelint]
transform[stdout]:
transform[stdout]: stdin
transform[stdout]: 65:4 ⚠  无效的 React Native 样式属性 "vertical-align" (taro-rn/css-property-no-unknown) [stylelint]
transform[stdout]:
transform[stdout]: node_modules/taro-ui/rn/style/components/input.scss
transform[stdout]: 1:1  ⚠  @-rule 会被 React Native 忽略 [stylelint]
transform[stdout]:
transform[stdout]:
transform[stdout]: node_modules/taro-ui/dist/style/components/icon.scss
transform[stdout]: 1    ⚠  @-rule 会被 React Native 忽略 [stylelint]
transform[stdout]: 3:2  ⚠  无效的 React Native 样式属性 "src" (taro-rn/css-property-no-unknown) [stylelint]
transform[stdout]: 16:2 ⚠  无效的 React Native 样式属性 "text-rendering" (taro-rn/css-property-no-unknown) [stylelint]
transform[stdout]: 17:2 ⚠  Unexpected line-height "1", expect a value with units (taro-rn/line-height-no-value-without-unit) [stylelint]
transform[stdout]:
transform[stdout]: node_modules/taro-ui/dist/style/components/toast.scss
transform[stdout]: 5    ⚠  @-rule 会被 React Native 忽略 [stylelint]
transform[stdout]: 34:6 ⚠  组合选择器会被 React Native 忽略 [stylelint]
transform[stdout]: 35:8 ⚠  无效的 React Native 样式属性 "animation" (taro-rn/css-property-no-unknown) [stylelint]
transform[stdout]: 35:8 ⚠  该单位会被 React Native 忽略 [stylelint]
transform[stdout]: 40:2 ⚠  组合选择器会被 React Native 忽略 [stylelint]

......

transform[stdout]:
transform[stdout]: node_modules/taro-ui/dist/style/variables/default.scss
transform[stdout]: 90:17        ⚠  Unexpected line-height "1.5", expect a value with units (taro-rn/line-height-no-value-without-unit) [stylelint]
transform[stdout]: 90:17        ⚠  Unexpected line-height "1.5", expect a value with units (taro-rn/line-height-no-value-without-unit) [stylelint]

......

transform[stdout]:
error src\app.scss: Unexpected token type: word.
Error: Unexpected token type: word
    at TokenStream._throw (C:\MyData\SHOMOP\AI\shomop-painter\node_modules\taro-css-to-react-native\dist\css-to-react-native\TokenStream.js:90:13)
    at Object._default [as flex] (C:\MyData\SHOMOP\AI\shomop-painter\node_modules\taro-css-to-react-native\dist\css-to-react-native\transforms\flex.js:57:27)
    at baseTransformShorthandValue (C:\MyData\SHOMOP\AI\shomop-painter\node_modules\taro-css-to-react-native\dist\css-to-react-native\index.js:51:37)
    at getStylesForProperty (C:\MyData\SHOMOP\AI\shomop-painter\node_modules\taro-css-to-react-native\dist\css-to-react-native\index.js:63:64)
    at C:\MyData\SHOMOP\AI\shomop-painter\node_modules\taro-css-to-react-native\dist\css-to-react-native\index.js:81:33
    at Array.reduce (<anonymous>)
    at _default (C:\MyData\SHOMOP\AI\shomop-painter\node_modules\taro-css-to-react-native\dist\css-to-react-native\index.js:77:16)     
    at transformDecls (C:\MyData\SHOMOP\AI\shomop-painter\node_modules\taro-css-to-react-native\dist\index.js:69:62)
    at transform (C:\MyData\SHOMOP\AI\shomop-painter\node_modules\taro-css-to-react-native\dist\index.js:101:7)
info Run CLI with --verbose flag for more details.
Done in 35.27s.

Apr 27 '23 07:04 thxl2010

如果用了 stylus 该怎么做？

May 10 '23 11:05 Jeff-Tian

求一个最新的taro-ui和taro适配的版本

Jun 13 '23 01:06 xukexin

taro-ui taro-ui copied to clipboard

Taro UI 支持 React native 内测版本

Taro UI 支持 React native内测版本

配置

动画部分

非 React Native 部分

快速预览

欢迎大家前来围观~

p a t c h

taro-ui
taro-ui copied to clipboard