介绍
react-native-stylus-transformer 是一个将 STYLUS 样式文件转换为可在 React Native 中使用的样式表的 npm 包。使用该包可以方便快捷地在 React Native 中使用 STYLUS 样式，并且能够提高前端开发效率。
安装
推荐使用 npm 安装 react-native-stylus-transformer 包：
npm install --save-dev react-native-stylus-transformer
配置
在 React Native 项目中 metro.config.js 文件中添加以下代码：
-- -------------------- ---- -------
----- ------------------ - ------------------------
-------------- - ------ -- -- -
----- ------ - ----- -------------------
------------------------------------ - -
----------------- ----
--
------ -------
-----然后重启 Metro Server，STYLUS 样式表就可以被 React Native 项目正确地解析了。
使用
在 React Native 中使用 STYLUS 样式表非常简单，只需要在需要样式的组件中引入样式表并使用即可。
// 引入样式表
import styles from './styles.styl';
// 使用样式表
<Text style={styles.myTextClass}>Hello World!</Text>
<View style={styles.myViewClass}></View>实例
下面是一个简单的 STYLUS 样式表示例：
-- -------------------- ---- ------- -- ------ ---- - ------- ----- - ------- -- ----- ------------ ------ ----- ------- ----- ----------------- ---- ------------ ------ ----- ---------- ----
在 React Native 组件中使用该样式表：
-- -------------------- ---- -------
------ ------ ---- ----------------
-------- ------------------ -
------ -
----- ---------------------------
----- ----------------------------------------------
-------
--
-总结
通过使用 react-native-stylus-transformer 包进行 STYLUS 样式表转换，可以方便地在 React Native 项目中使用 STYLUS 样式表，从而提高开发效率。在项目中使用时，只需要引入样式表并在组件中使用即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822aea