taro RN端样式转换优化

odopli94  于 3个月前  发布在  其他
关注(0)|答案(1)|浏览(52)

这个特性解决了什么问题?

向这样的css会被转化为4个属性,是没必要的转化,而且会导致 我在style里面无法覆盖这个属性,行为也和其他端不一致

padding: 10px;
margin: 10px;

这个 API 长什么样?

这是我patch的,可以提供参考

diff --git a/node_modules/taro-css-to-react-native/dist/css-to-react-native/transforms/flex.js b/node_modules/taro-css-to-react-native/dist/css-to-react-native/transforms/flex.js
index 7d6223e..35ba5aa 100644
--- a/node_modules/taro-css-to-react-native/dist/css-to-react-native/transforms/flex.js
+++ b/node_modules/taro-css-to-react-native/dist/css-to-react-native/transforms/flex.js
@@ -14,6 +14,16 @@ var defaultFlexGrow = 1;
 var defaultFlexShrink = 1;
 var defaultFlexBasis = 0;
 var _default = function _default(tokenStream) {
+  /**
+   * fix: 将flex: 1;原样输出
+   */
+  if (tokenStream.nodes.length === 1 && tokenStream.nodes[0].value === '1') {
+    return {
+      $merge: {
+        flex: 1
+      }
+    };
+  }
   var flexGrow;
   var flexShrink;
   var flexBasis;
diff --git a/node_modules/taro-css-to-react-native/dist/css-to-react-native/transforms/util.js b/node_modules/taro-css-to-react-native/dist/css-to-react-native/transforms/util.js
index d4d9ceb..be15c25 100644
--- a/node_modules/taro-css-to-react-native/dist/css-to-react-native/transforms/util.js
+++ b/node_modules/taro-css-to-react-native/dist/css-to-react-native/transforms/util.js
@@ -31,6 +31,15 @@ var directionFactory = function directionFactory(_ref) {
     _ref$suffix = _ref.suffix,
     suffix = _ref$suffix === void 0 ? '' : _ref$suffix;
   return function (tokenStream) {
+    if (tokenStream.nodes.length === 1 && tokenStream.nodes[0].value.endsWith('px')) {
+      const val = tokenStream.nodes[0].value.replace('px', '');
+      return {
+        $merge: {
+          [`${_ref$prefix}${_ref$suffix || ''}`]: `scalePx2dp(${val})`
+        }
+      };
+    }
+
     var _output;
     var values = [];
wn9m85ua

wn9m85ua1#

目前正在做的新版鸿蒙/RN的Stylesheet编译插件会解决该问题: https://github.com/NervJS/parse-css-to-stylesheet/tree/feat/rn 完成后替换社区目前的css解析插件

相关问题