如何配置React Native项目中的CSS Modules？

本文共计747个文字，预计阅读时间需要3分钟。

目录- 安装依赖和配置- 使用- 示例- 前端工程师的希望：像开发web应用一样- 使用CSS Modules开发React Native

本文将介绍如何在React Native中使用CSS Modules。

安装依赖和配置首先，确保你的开发环境已设置好React Native。

使用使用CSS Modules时，你可以将CSS类名定义为React组件的props，如下所示：

javascriptimport React from 'react';import styles from './styles.module.css';

const MyComponent=()=> { return Hello, World!;};

export default MyComponent;

示例以下是一个使用CSS Modules的示例：

javascript// styles.module.css.myClass { color: red; font-size: 16px;}

.myOtherClass { background-color: blue;}

javascriptimport React from 'react';import styles from './styles.module.css';

const MyComponent=()=> { return ( This is a red text. This is a blue background. );};

export default MyComponent;

前端工程师的希望：像开发web应用一样一些前端工程师希望开发移动应用时能像开发web应用一样方便。使用CSS Modules可以帮助实现这一点，因为它提供了一种模块化的CSS管理方式，与web开发中的做法类似。

使用CSS Modules开发React Native在React Native中，CSS Modules提供了一种管理样式的方法，类似于web开发中的做法。通过将CSS文件以`.module.css`结尾，你可以利用CSS Modules的特性，使样式局部化并避免全局命名冲突。

目录

• 安装依赖和配置
• 使用
• 示例

有些前端工程师希望也能像开发 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, }, })

示例

这里有一个示例，供你参考。

到此这篇关于如何在ReactNative中使用CSSModules的文章就介绍到这了,更多相关ReactNative使用CSSModules内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！