在 React Native 中使用 CSS Modules的配置方法
短信预约 -IT技能 免费直播动态提醒
有些前端工程师希望也能像开发 web 应用那样，使用 CSS Modules 来开发 React Native。本文将介绍如何在 React Native 中使用 CSS Modules。
安装依赖和配置
首先安装 react-native-sass-transformer 使得我们可以在 React Native 应用中使用 sass 样式。
yarn add react-native-sass-transformer sass -D参考如下配置，修改 metro.config.js 文件
const { getDefaultConfig } = require("metro-config")
module.exports = (async () => {
const {
resolver: { sourceExts },
} = await getDefaultConfig()
return {
transformer: {
babelTransformerPath: require.resolve("react-native-sass-transformer"),
},
resolver: {
sourceExts: [...sourceExts, "scss", "sass"],
},
}
})()我们还需要安装另外两个依赖
yarn add babel-plugin-react-native-classname-to-style \
babel-plugin-react-native-platform-specific-extensions -D修改 babel.config.js 文件，配置刚刚安装的两个插件
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
"react-native-classname-to-style",
[
"react-native-platform-specific-extensions",
{
extensions: ["scss", "sass"],
},
],
],
}因为我们的项目使用了 Typescript，为了避免类型警告，在项目中添加一个 global.d.ts 文件，内容如下
declare module "*.scss"使用
React Native CSS Modules 支持 @mixin @include @extend 等操作
@mixin lightFontStyle($fontColor: rgb(0, 0, 0)) {
font-size: 22px;
font-family: $sencodary-font-light;
letter-spacing: 0.96px;
color: $fontColor;
}
.input {
@include lightFontStyle($fontColor: rgb(39, 39, 39));
padding: 12px 20px 40px;
flex: 1;
}
.disabled {
@extend .input;
color: rgb(99, 99, 99);
}CSS Modules 也可以很好的和 StyleSheet 一起工作
// App.scss
@import "./theme/font.scss";
.welcome {
font-family: $primary-font;
font-size: 17px;
text-align: center;
}//App.tsx
import React from "react"
import { Text, StyleSheet } from "react-native"
import scss from "./App.scss"
function Welcome(props: Props) {
return <Text style={[scss.welcome, styles.text]}>Hello {props.name}!</Text>
}
const styles = StyleSheet.create({
text: {
backgroundColor: "transparent",
margin: 8,
},
})示例
这里有 一个示例 ，供你参考。
到此这篇关于如何在 React Native 中使用 CSS Modules的文章就介绍到这了,更多相关React Native使用 CSS Modules内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
