search

NervJS / taro-ui

一款基于 Taro 框架开发的多端 UI 组件库
https://taro-ui.taro.zone
MIT License
4.52k stars 756 forks source link

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

Open shinken008 opened 2 years ago

shinken008 commented 2 years ago

Taro UI 支持 React native内测版本

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

配置

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

动画部分

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

非 React Native 部分

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

快速预览

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

下载 taro-playground 扫一扫尝试

欢迎大家前来围观~

taro-ui-bot[bot] commented 2 years ago

欢迎提交 Issue~

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

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

Good luck and happy coding~

shinken008 commented 2 years ago

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

SidneyLann commented 2 years ago

支持linaria或styled-components吗？

beehoo commented 2 years ago

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

zhiqingchen commented 2 years ago

3.1.0-beta.2

检查版本是否有误

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

beehoo commented 2 years ago

3.1.0-beta.2

检查版本是否有误

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

版本是对的

zhiqingchen commented 2 years ago

可以看看demo

beehoo commented 2 years ago

可以看看demo

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

eugle commented 2 years ago

@zhiqingchen demo在哪里看呢

zhiqingchen commented 2 years ago

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

zhiqingchen commented 2 years ago

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

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

  1. 从脚手架模板选择 RN 创建后,
  2. 安装 taro-ui ,
  3. config/index.js 里 
    {
rn:{
  resolve: {
      include: ['taro-ui'], // 处理引用 node_modules/taro-ui 的依赖。
  },
  enableSvgTransform: true, // 处理图标
}
}
  4. src/app.scss 里 @import "~taro-ui/dist/style/index.scss";
  5. 页面内正常引入对应组件, 如 import { AtAvatar } from 'taro-ui' 即可
eugle commented 2 years ago

引入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 commented 2 years ago

引入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 commented 2 years ago

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

ksh033 commented 2 years ago

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 commented 2 years ago

楼上的这个问题 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]
Lpbzzz commented 2 years ago

楼上的这个问题 #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、 微信开发者工具

zhiqingchen commented 2 years ago

新版本 3.1.0-beta.2

defolly commented 1 year ago

安装的是 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 commented 1 year ago

提供下环境信息

defolly commented 1 year ago

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

tianlinzx commented 1 year ago

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 commented 1 year ago

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

image

zhiqingchen commented 1 year ago

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 commented 1 year ago

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

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

zhiqingchen/taro-ui-rn-demo@d3a16d2

  1. 从脚手架模板选择 RN 创建后,
  2. 安装 taro-ui ,
  3. config/index.js 里 rn:{ resolve: { include: ['taro-ui'], // 处理引用 node_modules/taro-ui 的依赖。 enableSvgTransform: true, // 处理图标 }, }
  4. src/app.scss 里 @import "~taro-ui/dist/style/index.scss";
  5. 页面内正常引入对应组件, 如 import { AtAvatar } from 'taro-ui' 即可

image

image

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

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

企业微信截图_16756707409164

shinken008 commented 1 year ago

用 3.4 试试？

thxl2010 commented 1 year ago

引入 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 commented 1 year ago

如果用了 stylus 该怎么做？

xukexin commented 1 year ago

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

hbwow commented 1 year ago

Taro 3.6.8 这个报错

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