Taro UI 支持 React native 内测版本 #1424

shinken008 · 2022-01-07T10:57:56Z

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 扫一扫尝试

欢迎大家前来围观~

taro-ui-bot · 2022-01-07T10:58:24Z

欢迎提交 Issue~

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

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

Good luck and happy coding~

shinken008 · 2022-01-07T11:01:28Z

release ci bug，手动更新最新版本 taro-ui@3.1.0-beta.1

SidneyLann · 2022-01-14T12:30:14Z

支持linaria或styled-components吗？

beehoo · 2022-01-20T05:16:28Z

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

zhiqingchen · 2022-01-20T07:22:20Z

3.1.0-beta.2

检查版本是否有误

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

beehoo · 2022-01-20T08:31:16Z

3.1.0-beta.2

检查版本是否有误

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

版本是对的

zhiqingchen · 2022-01-20T14:09:46Z

可以看看demo

beehoo · 2022-01-20T14:48:55Z

可以看看demo

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

eugle · 2022-02-07T13:38:57Z

@zhiqingchen demo在哪里看呢

zhiqingchen · 2022-02-08T05:42:47Z

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

zhiqingchen · 2022-02-16T10:07:29Z

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

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' 即可

eugle · 2022-03-03T11:42:07Z

引入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.

eugle · 2022-03-03T11:43:02Z

引入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]:

ksh033 · 2022-04-07T08:38:13Z

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

ksh033 · 2022-04-08T02:19:44Z

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
>这样至少还能用

drizzlesconsin · 2022-05-16T14:18:42Z

楼上的这个问题 #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

taro-ui/packages/taro-ui-demo-rn/src/app.scss

Lines 1 to 3 in d005a01

// 开发使用 `@import "~taro-ui/rn/style/index.scss"` 实时编译

// 或者开发在 taro-ui 库里面引入对应的 components/scss 则不需要编译 app.scss

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

不过还剩下一点问题：

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]

Lpbzzz · 2022-06-30T02:44:38Z

楼上的这个问题 #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

taro-ui/packages/taro-ui-demo-rn/src/app.scss

Lines 1 to 3 in d005a01

// 开发使用 `@import "~taro-ui/rn/style/index.scss"` 实时编译

// 或者开发在 taro-ui 库里面引入对应的 components/scss 则不需要编译 app.scss

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

不过还剩下一点问题：

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、微信开发者工具

zhiqingchen · 2022-08-09T02:32:47Z

新版本 3.1.0-beta.2

defolly · 2022-09-23T03:42:11Z

安装的是 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)

shinken008 · 2022-09-28T09:05:06Z

提供下环境信息

defolly · 2022-09-30T01:09:16Z

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

tianlinzx · 2022-11-19T03:34:47Z

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]:

Leslie-Wong-H · 2022-11-30T05:07:03Z

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

zhiqingchen · 2022-11-30T05:30:44Z

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, // 处理图标
  }
}

Leslie-Wong-H · 2022-11-30T16:26:28Z

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' 即可

Sloth9527 · 2023-02-06T08:11:42Z

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

taro-ui@3.1.0-beta.4 支持 taro 哪个版本？

shinken008 · 2023-02-09T07:07:24Z

用 3.4 试试？

thxl2010 · 2023-04-27T07:03:43Z

引入 taro-ui@3.1.0-beta.4 并按照上边修改之后，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.

Jeff-Tian · 2023-05-10T11:56:59Z

如果用了 stylus 该怎么做？

xukexin · 2023-06-13T01:44:23Z

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

hbwow · 2023-06-21T03:53:13Z

Taro 3.6.8 这个报错

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

shinken008 pinned this issue Jan 7, 2022

zhiqingchen mentioned this issue Feb 17, 2022

支持 Taro 的 UI 库都支持 RN 么？ wuba/taro-playground#40

Closed

zhiqingchen mentioned this issue Apr 12, 2022

[AtToast] Error: React.Children.only expected to receive a single React element child. #1459

Open

zhiqingchen mentioned this issue Oct 9, 2022

error: node_modules/@tarojs/rn-supporter/dist/empty-module.js: Cannot use import statement outside a module NervJS/taro#12618

Closed

zhiqingchen mentioned this issue Feb 3, 2023

引入 import { AtInput } from 'taro-ui'; 报错 Unable to resolve module expo-asset wuba/Taro-Mortgage-Calculator#57

Closed

zhiqingchen mentioned this issue Aug 15, 2023

TypeError: Cannot read property 'BarCodeType' of undefined, js engine: hermes #1645

Open

zhiqingchen mentioned this issue Nov 1, 2023

taro-ui运行dev:rn报错 NervJS/taro#14747

Open

robinv8 unpinned this issue Dec 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Taro UI 支持 React native 内测版本 #1424

Taro UI 支持 React native 内测版本 #1424

shinken008 commented Jan 7, 2022 •

edited by zhiqingchen

Loading

taro-ui-bot bot commented Jan 7, 2022

shinken008 commented Jan 7, 2022

SidneyLann commented Jan 14, 2022

beehoo commented Jan 20, 2022

zhiqingchen commented Jan 20, 2022

beehoo commented Jan 20, 2022

zhiqingchen commented Jan 20, 2022

beehoo commented Jan 20, 2022

eugle commented Feb 7, 2022

zhiqingchen commented Feb 8, 2022

zhiqingchen commented Feb 16, 2022 •

edited

Loading

eugle commented Mar 3, 2022

eugle commented Mar 3, 2022

ksh033 commented Apr 7, 2022

ksh033 commented Apr 8, 2022

drizzlesconsin commented May 16, 2022

Lpbzzz commented Jun 30, 2022 •

edited

Loading

zhiqingchen commented Aug 9, 2022

defolly commented Sep 23, 2022

shinken008 commented Sep 28, 2022

defolly commented Sep 30, 2022

tianlinzx commented Nov 19, 2022

Leslie-Wong-H commented Nov 30, 2022

zhiqingchen commented Nov 30, 2022 •

edited

Loading

Leslie-Wong-H commented Nov 30, 2022

Sloth9527 commented Feb 6, 2023

shinken008 commented Feb 9, 2023

thxl2010 commented Apr 27, 2023

Jeff-Tian commented May 10, 2023

xukexin commented Jun 13, 2023

hbwow commented Jun 21, 2023

Taro UI 支持 React native 内测版本 #1424

Taro UI 支持 React native 内测版本 #1424

Comments

shinken008 commented Jan 7, 2022 • edited by zhiqingchen Loading