在前端开发中，样式是一个非常重要的部分，然而CSS在编写大型项目时存在着一些麻烦，如选择器优先级、嵌套等问题。在这个时候，Less 和 Sass 就成为了很好的选择。而本文主要介绍的是在React Native中使用的Less库：@nathanfaucett/native.less。
前置条件
在使用该库时，需要先安装npm和react-native，并在项目中安装react-native-css，其中react-native-css是将CSS转换成JavaScript对象的库，native.less则是基于其开发的，用于在React Native项目中方便地编写样式代码。
安装
在安装之前，我们需要先确认一下项目是否使用了typescript，如未使用则需要先在项目中安装typescript和ts-loader，并在webpack.config.js中进行相应的配置。
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------- -
------ -
-
----- ----------
------- ------------
-------- -
-------------- -----
--
--
--
--
-- ---
--安装npm包的命令为：
npm install @nathanfaucett/native.less --save-dev
使用
在项目中引用该库：
-- -------------------- ---- -------
------ - ---------- - ---- ---------------
------ - ---------- - ---- -----------------------------
----- ---- - ---------------
------ ----- ------ - -----------------------
---------- -
----- --
----------------- -----
---------------- -------
------------ -------
-
------ -
---------- -----
-------------- -----
-
---在上面的代码中，我们将一个字符串模板以 less`` 的形式传入了 createLess 方法，并将返回的对象直接传给了 StyleSheet.create 方法，这样就得到了一个可以供组件使用的 StyleSheet 对象。
深度学习
此处仅是一个初步的使用示例，如果你想深入了解该库的使用方法，可以在Github上查看该库的源代码：https://github.com/nathanfaucett/native.less
小结
在React Native开发中，@nathanfaucett/native.less 可以帮助我们更快地编写样式代码，避免了手写StyleSheet时的一些不便，并且使用上十分方便。希望本文对你在使用该库时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e24497f