taro borderTopStyle/borderRightStyle/borderBottomStyle/borderLeftStyle在RN中的支持

5gfr0r5j  于 2022-10-20  发布在  其他
关注(0)|答案(6)|浏览(209)

问题描述

在RN中使用 border-bottom: 1px solid #fff; 会报错,因为RN的StyleSheet不支持这种写法。
另外阅读文档,发现RN的border只支持borderStyle,不支持具体方向分别设置。
在看taro-ui源码时得知scss是可以使用 @if 这种表达式的。所以是否能在scss中注入类似 process.env.TARO_ENV 的变量?这样就可以让开发者在scss中做简单的控制。

系统信息

Taro CLI 1.2.4 environment info:
System:
OS: macOS 10.14.2
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.11.0 - /usr/local/bin/node
Yarn: 1.3.2 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
npmGlobalPackages:
typescript: 2.4.2

bfnvny8b

bfnvny8b1#

欢迎提交 Issue~

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

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

Good luck and happy coding~

vwoqyblh

vwoqyblh3#

设置具体方向的border,可以这样写:

border-width: 0 0 2px 0;
  border-bottom-color: #dddddd;
  border-style: solid;
2jcobegt

2jcobegt4#

设置具体方向的border,可以这样写:

border-width: 0 0 2px 0;
  border-bottom-color: #dddddd;
  border-style: solid;

有办法在scss中判断当前环境的吗?例如同一个选择器,在RN中我用 border-style: solid; 在其他环境用 border-right-style: solid;

gorkyyrv

gorkyyrv5#

这个能满足你需求吗:

/*postcss-pxtransform rn eject enable*//*postcss-pxtransform rn eject disable*/ 中间的代码, 在编译成 RN 端的样式的时候,会被删除。建议将 RN 不支持的但 H5 端又必不可少的样式放到这里面。如:样式重制相关的代码。

/*postcss-pxtransform rn eject enable*/

.test {
  color: black;
}

/*postcss-pxtransform rn eject disable*/
oknrviil

oknrviil6#

这个能满足你需求吗:

/*postcss-pxtransform rn eject enable*//*postcss-pxtransform rn eject disable*/ 中间的代码, 在编译成 RN 端的样式的时候,会被删除。建议将 RN 不支持的但 H5 端又必不可少的样式放到这里面。如:样式重制相关的代码。

/*postcss-pxtransform rn eject enable*/

.test {
  color: black;
}

/*postcss-pxtransform rn eject disable*/

我觉得可行。如果方便的话,其他端最好也有这种注解,如支付宝和头条

相关问题