-
Notifications
You must be signed in to change notification settings - Fork 758
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Taro UI 支持 React native 内测版本 #1424
Comments
欢迎提交 Issue~ 如果你提交的是 bug 报告,请务必遵循 Issue 模板的规范,尽量用简洁的语言描述你的问题,最好能提供一个稳定简单的复现。🙏🙏🙏 如果你的信息提供过于模糊或不足,或者已经其他 issue 已经存在相关内容,你的 issue 有可能会被关闭。 Good luck and happy coding~ |
release ci bug,手动更新最新版本 taro-ui@3.1.0-beta.1 |
支持linaria或styled-components吗? |
请问RN版的组件使用方式是和之前的有什么区别么?为何我引用了AtTabs组件没有效果? |
3.1.0-beta.2 检查版本是否有误
|
版本是对的 |
可以看看demo |
啊。。。config里rn下面要加 |
@zhiqingchen demo在哪里看呢 |
通过模板初始化后,改几个地方即可接入 https://github.com/zhiqingchen/taro-ui-rn-demo/commit/d3a16d202945956ebb49822d310acaba70de1ecd
{
rn:{
resolve: {
include: ['taro-ui'], // 处理引用 node_modules/taro-ui 的依赖。
},
enableSvgTransform: true, // 处理图标
}
}
|
引入taroui后,rn会这样的warn
|
引入taroui后,启动项目即报这样的 提示
|
className属性不生效,原因:className通过babel-plugin-transform-react-jsx-to-rn-stylesheet转成style属性,组件中有不使用style属性。另外为什么AtInput一定要onChange?,value不能在AtInput state控制吗? |
AtButton在 Form也提交不了,建议属性 const { |
楼上的这个问题 #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
不过还剩下一点问题: 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] |
还有最后一步 :
最后重启 npm run dev、 微信开发者工具 |
新版本 3.1.0-beta.2 |
安装的是 3.1.0-beta.2 , 按上面的步骤处理好config, 引入scss 之后,yarn build:rn 还是会报错 transform[stderr]: \node_modules\metro-hermes-compiler\src\e |
提供下环境信息 |
BUNDLE ./index error: src/assets/images/icon-list-basic.png: The "path" argument must be of type string. Received undefined error: src/assets/images/icon-list-form.png: The "path" argument must be of type string. Received undefined p
|
config/index.js {
rn:{
resolve: {
include: ['taro-ui'], // 处理引用 node_modules/taro-ui 的依赖。
},
enableSvgTransform: true, // 处理图标
}
} |
Thanks. Please correct this. 'enableSvgTransform' is not inside 'resolve'.
|
用 3.4 试试? |
引入 $ 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. |
如果用了 stylus 该怎么做? |
求一个最新的taro-ui和taro适配的版本 |
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 扫一扫尝试
欢迎大家前来围观~
The text was updated successfully, but these errors were encountered: