@actbase/react-native-less-transformer 中文文档教程

Question

react-native-less-transformer

使用 Less 为您的 React Native 应用设置样式。

在幕后，.less 文件被转换为 React 原生样式对象（查看示例）。

此转换器可以与 React Native CSS 模块 一起使用。

How does it work?

您的 App.less 文件可能如下所示：

@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;

.myClass {
  color: @light-blue;
}
.myOtherClass {
  color: red;
}
.my-dashed-class {
  color: green;
}

当您导入样式表时：

import styles from "./App.less";

您导入的样式将如下所示：

var styles = {
  myClass: {
    color: "#6c94be"
  },
  myOtherClass: {
    color: "red"
  },
  "my-dashed-class": {
    color: "green"
  }
};

然后您可以将该样式对象与一个元素一起使用：

Plain React Native:< /strong>

<MyElement style={styles.myClass} />

<MyElement style={styles["my-dashed-class"]} />

使用 className 属性：

<MyElement className={styles.myClass} />

<MyElement className={styles["my-dashed-class"]} />

React Native CSS 模块 使用 styleName 属性：

<MyElement styleName="myClass my-dashed-class" />

Installation and configuration

此转换器的最低 React Native 版本为 0.52。 如果您使用的是旧版本，请在尝试使用此转换器之前更新到较新的 React Native 版本。

Step 1: Install

yarn add --dev react-native-less-transformer less

Step 2: Configure the react native packager

For React Native v0.57 or newer / Expo SDK v31.0.0 or newer

将其添加到项目根目录中的 metro.config.js（创建文件如果它还不存在）：

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-less-transformer")
    },
    resolver: {
      sourceExts: [...sourceExts, "less"]
    }
  };
})();

如果你正在使用 Expo，你还需要将它添加到 app.json ：

{
  "expo": {
    "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": ["js", "jsx", "less"]
    }
  }
}

---

For React Native v0.56 or older

如果您使用的是不带 Expo 的 React Native，请将其添加到项目根目录中的 rn-cli.config.js（如果您还没有文件，请创建该文件）：

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-less-transformer");
  },
  getSourceExts() {
    return ["js", "jsx", "less"];
  }
};

---

For Expo SDK v30.0.0 or older

如果您使用的是 <一个 href="https://expo.io/">Expo，而不是添加 rn-cli.config.js 文件，你需要将这个添加到 app .json：

{
  "expo": {
    "packagerOpts": {
      "sourceExts": ["js", "jsx", "less"],
      "transformer": "node_modules/react-native-less-transformer/index.js"
    }
  }
}

LESS options

如果您需要将选项（例如插件）传递给 less，您可以通过创建一个 transformer.js 文件并执行以下操作来实现：

// For React Native version 0.59 or later
var upstreamTransformer = require("metro-react-native-babel-transformer");

// For React Native version 0.56-0.58
// var upstreamTransformer = require("metro/src/reactNativeTransformer");

// For React Native version 0.52-0.55
// var upstreamTransformer = require("metro/src/transformer");

// For React Native version 0.47-0.51
// var upstreamTransformer = require("metro-bundler/src/transformer");

// For React Native version 0.46
// var upstreamTransformer = require("metro-bundler/build/transformer");

var lessTransformer = require("react-native-less-transformer");

module.exports.transform = function({ src, filename, options }) {
  if (filename.endsWith(".less")) {
    var opts = Object.assign(options, {
      lessOptions: {
        plugins: [require("less-plugin-glob")]
      }
    });
    return lessTransformer.transform({ src, filename, options: opts });
  } else {
    return upstreamTransformer.transform({ src, filename, options });
  }
};

之后在 metro.config.js 中将 babelTransformerPath 指向该文件：

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("./transformer.js")
    },
    resolver: {
      sourceExts: [...sourceExts, "less"]
    }
  };
})();

CSS Custom Properties (CSS variables)

你需要 1.2.1 或更新的版本

:root {
  --text-color: blue;
}

.blue {
  color: var(--text-color);
}

CSS 变量不支持默认，但是 您可以使用 PostCSS 和

从安装依赖项开始：

yarn add postcss postcss-css-variables react-native-postcss-transformer --dev

使用 之一将 postcss-css-variables 添加到您的 PostCSS 配置中支持的配置格式，例如package.json、.postcssrc、postcss.config.js等。

之后创建一个< code>transformer.js 文件并执行以下操作：

// For React Native version 0.59 or later
var upstreamTransformer = require("metro-react-native-babel-transformer");

// For React Native version 0.56-0.58
// var upstreamTransformer = require("metro/src/reactNativeTransformer");

// For React Native version 0.52-0.55
// var upstreamTransformer = require("metro/src/transformer");

// For React Native version 0.47-0.51
// var upstreamTransformer = require("metro-bundler/src/transformer");

// For React Native version 0.46
// var upstreamTransformer = require("metro-bundler/build/transformer");

var lessTransformer = require("react-native-less-transformer");
var postCSSTransformer = require("react-native-postcss-transformer");

module.exports.transform = function({ src, filename, options }) {
  if (filename.endsWith(".less")) {
    return lessTransformer
      .renderToCSS({ src, filename, options })
      .then(css =>
        postCSSTransformer.transform({ src: css, filename, options })
      );
  } else {
    return upstreamTransformer.transform({ src, filename, options });
  }
};

之后在 metro.config.js 中将 babelTransformerPath 指向该文件：

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("./transformer.js")
    },
    resolver: {
      sourceExts: [...sourceExts, "less"]
    }
  };
})();

Dependencies

该库具有以下节点.js 模块作为依赖：

• app-root-path
• css-to-react-native-transform
• semver