目录

一、核心认知：StyleSheet 样式系统的本质与核心价值

1.1 什么是 StyleSheet？

1.2 StyleSheet 核心优势

1.3 StyleSheet 与 内联样式的核心区别

二、基础核心：StyleSheet 语法规范与快速上手

2.1 基础使用三步法（核心入门）

步骤 1：导入 StyleSheet 核心模块

✔ 步骤 2：通过 StyleSheet.create () 创建样式对象

✔ 步骤 3：在组件上通过 style 属性绑定样式

2.2 核心语法规则

规则 1：样式属性采用「小驼峰命名法」

规则 2：样式单位极简，无 px、rem、vw 等单位

规则 3：样式值为「字符串 / 数字」，无 CSS 复合写法

规则 4：不支持 CSS 选择器，样式为「组件级绑定」

规则 5：样式继承「有限制」，仅文本类属性支持继承

三、核心进阶：StyleSheet 高频特性与实战用法

3.1 特性一：样式复用

✔ 场景 1：组件内样式复用（同一页面多个组件共用样式）

✔ 场景 2：全局样式复用（多页面 / 多组件共用样式，项目必备）

3.2 特性二：样式组合

✔ 基础语法：数组形式组合样式 style={[样式1, 样式2, 样式3]}

✔ 核心规则：样式优先级

3.3 特性三：动态样式

✔ 实战场景：按钮禁用 / 可用状态样式切换

3.4 特性四：样式常量抽离

四、布局核心：React Native 鸿蒙 核心布局样式属性

核心布局基石：flex: 1

主轴与交叉轴控制（核心布局属性）

高频布局属性

▶ 内外边距：margin /padding 系列

▶ 宽高设置：width /height

▶ 视觉美化核心：圆角、边框、阴影

▶ 文本样式核心属性

五、实战综合案例

 案例 1：基础样式封装 - 多功能按钮组件（样式复用 + 组合）

 案例 2：布局综合实战 - 卡片式图文布局

案例 3：动态样式实战 - 列表项选中状态切换

✅ 案例 4：全局样式实战 - 项目级样式规范（常量抽离 + 全局复用）

在 React Native 鸿蒙跨平台开发体系中，样式系统是构建所有页面视觉表现的核心基石，也是所有组件的视觉骨架。无论是之前掌握的 View、Image 基础组件，还是 FlatList、SectionList 列表组件，亦或是 TouchableOpacity 交互组件，所有的布局排列、外观美化、状态样式切换，都完全依赖 StyleSheet 样式系统实现。

StyleSheet 是 React Native 官方内置的核心样式管理方案，也是 RN 鸿蒙开发中的标准样式编写规范，没有之一。它区别于前端 Web 开发的 CSS 样式体系，基于 JavaScript 进行封装与实现，专为移动端跨平台场景做了轻量化与高性能优化，鸿蒙端做了原生级的渲染适配，样式解析效率与视觉表现和鸿蒙原生应用完全一致。本文将全面讲解 StyleSheet 样式系统的核心原理、语法规范、布局核心、高频特性与多场景实战用法，所有代码均可直接复制运行，鸿蒙真机 / 模拟器完美适配，吃透这套样式系统，即可轻松实现 RN 鸿蒙开发中所有的页面样式与布局需求。

一、核心认知：StyleSheet 样式系统的本质与核心价值

1.1 什么是 StyleSheet？

StyleSheet 是 React Native 封装的高性能样式管理工具，本质是对各平台原生样式属性的 JavaScript 层标准化封装。它通过 StyleSheet.create() 方法创建结构化的样式对象，将页面样式与业务逻辑彻底解耦，最终由 RN 的桥接层解析为对应平台的原生样式（鸿蒙原生样式 / 安卓原生样式 /iOS 原生样式）。

核心重要知识点：React Native 开发中 不存在 Web 端的 CSS 文件、CSS 选择器、CSS3 语法，所有页面的样式与布局，都只能通过 StyleSheet 或临时内联样式实现，而 StyleSheet 是官方唯一推荐的生产环境标准方案。

1.2 StyleSheet 核心优势

✅ 极致的性能优化：StyleSheet 创建的样式会被 React Native 提前预处理并缓存，组件渲染时直接复用缓存的样式对象，避免内联样式每次渲染创建新对象的内存与性能损耗，鸿蒙端渲染效率拉满。✅ 样式与逻辑解耦：将所有样式抽离统一管理，页面代码中只关注业务逻辑，代码结构更清晰，可读性与可维护性大幅提升。✅ 强大的复用能力：支持公共样式抽离、全局样式复用、组件样式继承，可在多个页面 / 组件中复用同一份样式，大幅减少冗余代码。✅ 语法智能提示：配合 TypeScript 使用时，能提供完整的样式属性语法提示与类型校验，提前规避样式属性拼写错误、值类型错误等问题。✅ 跨平台样式统一：对各平台的样式差异做了底层抹平，一套样式代码可在鸿蒙、安卓、iOS 上呈现一致的视觉效果，无需单独做平台适配。✅ 轻量化无依赖：内置核心模块，无需引入任何第三方样式库，项目体积无额外增加。

1.3 StyleSheet 与 内联样式的核心区别

很多开发者会疑惑：既然 React Native 支持直接在组件上写内联样式（style={{width:200, height:60}}），为何还要使用 StyleSheet？这是开发中必须理清的核心知识点，两者的差异直接决定了项目的性能与可维护性，核心区别对照表如下：

对比维度 StyleSheet 样式（推荐） 内联样式（临时使用）
性能表现 提前缓存，渲染无额外开销，性能最优 每次渲染创建新样式对象，频繁重渲染会造成内存浪费
样式复用 支持全局复用、组件复用，可抽离公共样式 样式与组件绑定，无法复用，冗余代码多
代码可读性 样式抽离统一管理，逻辑与样式分离，可读性强 样式与组件代码混杂，页面复杂时代码臃肿，可读性差
语法提示 完整的语法提示与类型校验，极少出错 无语法提示，易出现属性拼写错误，排查困难
样式扩展性 支持样式组合、动态样式切换，扩展性极强 样式层级单一，无法组合，动态样式需拼接对象，灵活性差

二、基础核心：StyleSheet 语法规范与快速上手

2.1 基础使用三步法（核心入门）

StyleSheet 的使用遵循固定的「导入 → 创建 → 使用」三步流程，语法极简，是所有样式开发的基础，所有组件的样式编写都基于此流程实现：

步骤 1：导入 StyleSheet 核心模块
import { View, Text, StyleSheet } from 'react-native';
✔ 步骤 2：通过 StyleSheet.create () 创建样式对象
const styles = StyleSheet.create({
  // 定义样式规则：键名是样式名称，值是具体的样式属性与值
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    justifyContent: 'center',
    alignItems: 'center'
  },
  titleText: {
    fontSize: 20,
    color: '#333333',
    fontWeight: '600'
  }
});
✔ 步骤 3：在组件上通过 style 属性绑定样式
const StyleSheetDemo = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.titleText}>StyleSheet 样式系统基础</Text>
    </View>
  );
};

2.2 核心语法规则

React Native 的 StyleSheet 样式体系基于 CSS 但不等于 CSS，保留了 CSS 的核心样式思想，但做了适配移动端的语法调整与精简，以下是开发中必须遵守的核心语法规则，也是高频踩坑点，熟记即可规避 90% 的样式错误：

规则 1：样式属性采用「小驼峰命名法」

这是与 Web 端 CSS 最核心的区别！CSS 中的连字符命名属性，在 StyleSheet 中全部改为小驼峰命名，无任何例外：

  • Web CSS → RN StyleSheet：background-color → backgroundColor
  • Web CSS → RN StyleSheet：font-size → fontSize
  • Web CSS → RN StyleSheet：border-radius → borderRadius
  • Web CSS → RN StyleSheet：text-align → textAlign
  • Web CSS → RN StyleSheet：margin-top → marginTop
规则 2：样式单位极简，无 px、rem、vw 等单位

React Native 为了实现完美的跨平台适配，彻底抛弃了所有长度单位，样式中的数字值默认就是「与设备无关的逻辑像素」，RN 会根据不同设备的屏幕密度自动做适配缩放，鸿蒙端完美适配所有分辨率的设备：

// ✔ 正确写法：直接写数字，无需任何单位
box: {
  width: 200,
  height: 80,
  marginTop: 15,
  padding: 10
}

// ✖ 错误写法：不要添加任何单位，添加后样式完全不生效
box: {
  width: '200px', // 无效
  height: '80dp'  // 无效
}
规则 3：样式值为「字符串 / 数字」，无 CSS 复合写法
  • 长度类属性（宽高、边距、内边距等）的值为纯数字；
  • 颜色类属性的值为字符串（支持十六进制 #fff、rgb (255,255,255)、rgba (255,255,255,0.5)）；
  • 字体粗细、对齐方式等属性的值为字符串；
  • 不支持 CSS 的复合写法，例如 margin: 10 20 需拆分为 marginVertical:10, marginHorizontal:20，border:1px solid #ccc 需拆分为单独的边框属性。
规则 4：不支持 CSS 选择器，样式为「组件级绑定」

React Native 中没有 CSS 的类选择器、标签选择器、后代选择器，所有样式都必须通过组件的 style 属性直接绑定，样式的作用域仅对当前绑定的组件生效，不会产生样式污染，天然具备样式隔离能力。

规则 5：样式继承「有限制」，仅文本类属性支持继承

与 CSS 的全域继承不同，RN 的样式继承是有限继承：只有文本相关的属性（fontSize、color、fontWeight 等）会从父组件继承到子组件，布局类属性（width、margin、padding 等）、背景类属性均不支持继承。

三、核心进阶：StyleSheet 高频特性与实战用法

掌握基础语法后，StyleSheet 的核心能力体现在「样式复用、样式组合、动态样式、全局样式」四大特性上，这四大特性是实现复杂页面样式、动态交互样式、规范化项目开发的核心，也是开发中使用频率最高的能力，所有复杂样式场景都基于这些特性实现。

3.1 特性一：样式复用

样式复用是 StyleSheet 最核心的价值之一，分为「组件内复用」和「全局样式复用」两种场景，本质是将公共的样式抽离为独立的样式规则，在多个地方重复调用，减少冗余代码，提升开发效率。

✔ 场景 1：组件内样式复用（同一页面多个组件共用样式）
import { View, Text, StyleSheet } from 'react-native';
import React from 'react';

const styles = StyleSheet.create({
  // 抽离公共文本样式，多处复用
  commonText: {
    fontSize: 16,
    color: '#666666',
    lineHeight: 24
  },
  box: {
    padding: 15,
    margin: 10,
    backgroundColor: '#ffffff'
  }
});

const ReuseStyleDemo = () => {
  return (
    <View style={styles.box}>
      {/* 多个Text组件复用同一份样式 */}
      <Text style={styles.commonText}>样式复用示例1</Text>
      <Text style={styles.commonText}>样式复用示例2</Text>
      <Text style={styles.commonText}>样式复用示例3</Text>
    </View>
  );
};
✔ 场景 2：全局样式复用（多页面 / 多组件共用样式，项目必备）

项目开发中，多个页面会用到相同的样式（如主题色、公共按钮样式、公共卡片样式），此时可将这些样式抽离为全局样式文件，在任意页面导入使用，是项目规范化开发的标准写法：

// 新建 globalStyle.js 全局样式文件
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  themeColor: {
    backgroundColor: '#2196F3' // 全局主题色
  },
  commonBtn: {
    width: '100%',
    height: 60,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center'
  },
  commonText: {
    fontSize: 16,
    color: '#333'
  }
});

// 在任意页面导入并使用
import globalStyle from './globalStyle';
const Page = () => {
  return <View style={[globalStyle.themeColor, globalStyle.commonBtn]}></View>;
};

3.2 特性二：样式组合

样式组合是 React Native 样式系统的灵魂，也是实现「基础样式 + 差异化样式」的核心方式。StyleSheet 支持通过数组形式组合多个样式规则，数组中的样式会按「从左到右」的顺序进行合并，后定义的样式会覆盖先定义的同名样式，灵活性极强，能满足所有复杂的样式需求。

✔ 基础语法：数组形式组合样式 style={[样式1, 样式2, 样式3]}
import { View, Text, StyleSheet } from 'react-native';
import React from 'react';

const styles = StyleSheet.create({
  baseBtn: {
    width: 200,
    height: 60,
    borderRadius: 30,
    justifyContent: 'center',
    alignItems: 'center'
  },
  themeBtn: {
    backgroundColor: '#2196F3' // 主题色按钮
  },
  dangerBtn: {
    backgroundColor: '#FF4444' // 危险色按钮
  },
  btnText: {
    fontSize: 18,
    color: '#FFFFFF'
  }
});

const CombineStyleDemo = () => {
  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center', gap:10 }}>
      {/* 组合基础按钮样式 + 主题色样式 */}
      <View style={[styles.baseBtn, styles.themeBtn]}>
        <Text style={styles.btnText}>主题按钮</Text>
      </View>
      {/* 组合基础按钮样式 + 危险色样式 */}
      <View style={[styles.baseBtn, styles.dangerBtn]}>
        <Text style={styles.btnText}>危险按钮</Text>
      </View>
    </View>
  );
};
✔ 核心规则：样式优先级

数组组合样式的核心规则：后项覆盖前项，如果多个样式规则中有同名的样式属性，后面的样式会覆盖前面的样式属性，非同名属性则进行合并。

style={[styles.box, { backgroundColor: '#ff0000', width: 250 }]}
// 解析规则：styles.box中的所有样式生效，其中backgroundColor和width被后面的内联样式覆盖

3.3 特性三：动态样式

动态样式是实现「交互样式切换」的核心能力，例如：按钮的禁用 / 可用状态、列表项的选中 / 未选中状态、卡片的按压 / 常态样式、根据条件展示不同样式等。本质是结合 React 的状态（useState）与样式组合，根据状态值动态切换样式规则，是开发中 100% 会用到的核心能力，无任何学习成本，结合之前的知识点即可无缝掌握。

✔ 实战场景：按钮禁用 / 可用状态样式切换
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Switch } from 'react-native';

const styles = StyleSheet.create({
  operateBtn: {
    width: '80%',
    height: 60,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#00C853'
  },
  disabledBtn: {
    backgroundColor: '#CCCCCC' // 禁用状态样式
  },
  btnText: {
    fontSize: 18,
    color: '#FFFFFF'
  },
  disabledText: {
    color: '#EEEEEE' // 禁用文字样式
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 20
  }
});

const DynamicStyleDemo = () => {
  // 定义状态：控制按钮是否禁用
  const [isDisabled, setIsDisabled] = useState(false);

  return (
    <View style={styles.container}>
      <Switch
        value={isDisabled}
        onValueChange={(val) => setIsDisabled(val)}
      />
      {/* 核心：根据状态动态组合样式 */}
      <TouchableOpacity
        style={[styles.operateBtn, isDisabled && styles.disabledBtn]}
        disabled={isDisabled}
        activeOpacity={0.7}
      >
        <Text style={[styles.btnText, isDisabled && styles.disabledText]}>
          {isDisabled ? '按钮已禁用' : '点击执行操作'}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

3.4 特性四：样式常量抽离

项目开发中，会用到很多固定的样式常量（如主题色值、字体大小、边距间距、圆角值等），将这些常量抽离为独立的变量，再在 StyleSheet 中引用，可实现「一处修改，全局生效」，极大提升项目的可维护性，尤其适合中大型项目的样式统一管理，是高级开发的标准规范。

import { View, Text, StyleSheet } from 'react-native';
 import React from 'react';

// 抽离样式常量：主题色、字体、间距、圆角
const COLOR = {
  PRIMARY: '#2196F3',
  TEXT_MAIN: '#333333',
  TEXT_SECOND: '#666666',
  BG_GRAY: '#f5f5f5'
};
const FONT_SIZE = {
  BIG: 20,
  NORMAL: 16,
  SMALL: 14
};
const PADDING = {
  SMALL: 8,
  NORMAL: 12,
  BIG: 15
};

// 在样式中引用常量
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLOR.BG_GRAY,
    padding: PADDING.NORMAL
  },
  title: {
    fontSize: FONT_SIZE.BIG,
    color: COLOR.PRIMARY,
    fontWeight: '600'
  },
  content: {
    fontSize: FONT_SIZE.NORMAL,
    color: COLOR.TEXT_MAIN,
    marginTop: PADDING.SMALL
  }
});

const ConstantStyleDemo = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>样式常量抽离示例</Text>
      <Text style={styles.content}>统一管理样式常量，项目维护更高效</Text>
    </View>
  );
};

四、布局核心：React Native 鸿蒙 核心布局样式属性

在 React Native 鸿蒙开发中，所有页面的布局都基于 FlexBox（弹性布局）实现，这是 RN 官方唯一推荐的布局方案，也是移动端跨平台布局的最优解。FlexBox 布局的核心是「弹性伸缩」，能轻松实现居中、均分、自适应、响应式布局，适配所有尺寸的鸿蒙设备，无需做任何屏幕适配调整。StyleSheet 中所有的布局样式，都是围绕 FlexBox 布局体系设计的，以下是开发中高频使用、必须掌握的核心布局样式属性，覆盖 99% 的布局需求，熟记即可轻松实现所有页面布局。

核心布局基石：flex: 1

flex: 1 是 React Native 布局的「万金油属性」，也是最核心的布局属性，作用于父容器的子组件上，表示该组件占满父容器剩余的所有空间。如果父容器中只有一个子组件设置了 flex:1，则该组件会填满整个父容器；如果有多个子组件设置了 flex 属性，则会按 flex 的数值比例分配父容器的空间。

container: { flex: 1 } // 占满整个屏幕空间

主轴与交叉轴控制（核心布局属性）

FlexBox 布局的核心是「主轴」和「交叉轴」，默认主轴方向为 column（垂直方向），交叉轴为水平方向，所有的布局排列都基于这两个轴的对齐方式实现：

  1. flexDirection：设置主轴方向，可选值 column（垂直，默认）、row（水平），决定子组件的排列方向；
  2. justifyContent：主轴方向的对齐方式，可选值 center（居中）、flex-start（顶部 / 左侧，默认）、flex-end（底部 / 右侧）、space-between（两端对齐）、space-around（均匀分布）；
  3. alignItems：交叉轴方向的对齐方式，可选值 center（居中）、flex-start（顶部 / 左侧，默认）、flex-end（底部 / 右侧）、stretch（拉伸填满）。

高频布局属性

▶ 内外边距：margin /padding 系列

控制组件的外部间距与内部间距，是布局中最常用的属性，支持单独设置方向或统一设置：

  • margin：组件的外部间距，四周统一间距；
  • marginTop / marginBottom / marginLeft / marginRight：单独设置某一方向的外边距；
  • marginVertical：上下方向的外边距（合并写法，开发高频）；
  • marginHorizontal：左右方向的外边距（合并写法，开发高频）；
  • padding 系列与 margin 完全一致，作用是组件的内部间距。
▶ 宽高设置：width /height
  • 支持纯数字设置固定宽高：width:200, height:60；
  • 支持百分比设置自适应宽高：width:'100%', height:'50%'，适配不同屏幕尺寸；
  • 结合 flex:1 使用时，无需设置宽高，组件会自动自适应父容器空间。
▶ 视觉美化核心：圆角、边框、阴影

这三类属性是实现组件视觉效果的核心，开发中所有的按钮、卡片、图片都离不开这些属性，鸿蒙端完美适配无兼容性问题：

card: {
  width: '90%',
  padding: 15,
  backgroundColor: '#ffffff',
  borderRadius: 10, // 圆角，值越大越圆润
  borderWidth: 1,   // 边框宽度
  borderColor: '#f0f0f0', // 边框颜色
  shadowColor: '#000000', // 阴影颜色
  shadowOpacity: 0.1,     // 阴影透明度（0-1）
  shadowRadius: 5,        // 阴影模糊半径
  shadowOffset: { width:0, height:2 } // 阴影偏移量
}
▶ 文本样式核心属性

文本组件（Text）的核心样式属性，覆盖所有文本展示需求，文本类属性支持子组件继承：

textStyle: {
  fontSize: 16,        // 字体大小
  color: '#333333',    // 字体颜色
  fontWeight: '600',   // 字体粗细：normal(400)、bold(700)、600等
  textAlign: 'center', // 文本对齐：left/center/right
  lineHeight: 24,      // 行高
  marginVertical: 8    // 上下间距
}

五、实战综合案例

所有案例均为完整可运行代码，鸿蒙真机 / 模拟器完美适配，无任何报错，按「基础→进阶→综合」阶梯式排布，结合之前学过的所有组件（TouchableOpacity、Image、FlatList）与 StyleSheet 核心特性，覆盖开发中最常见的样式场景，代码可直接复制到项目中复用，是检验所学知识点的核心实战内容。

 案例 1：基础样式封装 - 多功能按钮组件（样式复用 + 组合）

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  // 基础按钮样式
  baseBtn: {
    width: '85%',
    height: 60,
    borderRadius: 30,
    justifyContent: 'center',
    alignItems: 'center',
    marginVertical: 8
  },
  // 不同状态样式
  primaryBtn: { backgroundColor: '#2196F3' },
  successBtn: { backgroundColor: '#00C853' },
  warningBtn: { backgroundColor: '#FFC107' },
  dangerBtn: { backgroundColor: '#FF4444' },
  // 按钮文字样式
  btnText: {
    fontSize: 18,
    color: '#FFFFFF',
    fontWeight: '500'
  }
});

const StyleButtonDemo = () => {
  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center', backgroundColor:'#f5f5f5' }}>
      <TouchableOpacity style={[styles.baseBtn, styles.primaryBtn]} activeOpacity={0.7}>
        <Text style={styles.btnText}>主要按钮</Text>
      </TouchableOpacity>
      <TouchableOpacity style={[styles.baseBtn, styles.successBtn]} activeOpacity={0.7}>
        <Text style={styles.btnText}>成功按钮</Text>
      </TouchableOpacity>
      <TouchableOpacity style={[styles.baseBtn, styles.warningBtn]} activeOpacity={0.7}>
        <Text style={styles.btnText}>警告按钮</Text>
      </TouchableOpacity>
      <TouchableOpacity style={[styles.baseBtn, styles.dangerBtn]} activeOpacity={0.7}>
        <Text style={styles.btnText}>危险按钮</Text>
      </TouchableOpacity>
    </View>
  );
};

export default StyleButtonDemo;

 案例 2：布局综合实战 - 卡片式图文布局

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    padding: 15
  },
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 10,
    padding: 12,
    flexDirection: 'row',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOpacity: 0.08,
    shadowRadius: 4
  },
  cardImg: {
    width: 80,
    height: 80,
    borderRadius: 8
  },
  cardInfo: {
    marginLeft: 15,
    flex: 1
  },
  cardTitle: {
    fontSize: 18,
    color: '#333',
    fontWeight: '600'
  },
  cardDesc: {
    fontSize: 14,
    color: '#666',
    marginTop: 6,
    lineHeight: 20
  },
  cardTag: {
    fontSize: 12,
    color: '#2196F3',
    backgroundColor: '#e8f4ff',
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
    marginTop: 8
  }
});

const imgUrl = 'https://picsum.photos/80/80?random=1';

const StyleCardDemo = () => {
  return (
    <View style={styles.container}>
      <View style={styles.card}>
        <Image source={{ uri: imgUrl }} style={styles.cardImg} resizeMode="cover" />
        <View style={styles.cardInfo}>
          <Text style={styles.cardTitle}>鸿蒙生态智能硬件</Text>
          <Text style={styles.cardDesc}>基于鸿蒙系统开发的智能设备，跨设备无缝协同，体验升级</Text>
          <Text style={styles.cardTag}>鸿蒙原生</Text>
        </View>
      </View>
    </View>
  );
};

export default StyleCardDemo;

案例 3：动态样式实战 - 列表项选中状态切换

import React, { useState } from 'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';

const dataList = [
  { id:1, name:'鸿蒙智能手环' },
  { id:2, name:'鸿蒙降噪耳机' },
  { id:3, name:'鸿蒙智能手表' },
  { id:4, name:'鸿蒙开发教程' },
  { id:5, name:'鸿蒙周边配件' }
];

const styles = StyleSheet.create({
  container: { flex:1, backgroundColor:'#f5f5f5', padding:10 },
  listItem: {
    height: 60,
    backgroundColor: '#ffffff',
    borderRadius: 8,
    justifyContent: 'center',
    paddingLeft: 15,
    marginBottom: 8
  },
  activeItem: {
    backgroundColor: '#e8f4ff',
    borderLeftWidth: 4,
    borderLeftColor: '#2196F3'
  },
  itemText: { fontSize:16, color:'#333' },
  activeText: { color:'#2196F3', fontWeight:'600' }
});

const StyleListDemo = () => {
  const [activeId, setActiveId] = useState(1);

  const renderItem = ({ item }) => {
    const isActive = item.id === activeId;
    return (
      <TouchableOpacity
        style={[styles.listItem, isActive && styles.activeItem]}
        onPress={() => setActiveId(item.id)}
        activeOpacity={0.8}
      >
        <Text style={[styles.itemText, isActive && styles.activeText]}>{item.name}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={dataList}
        renderItem={renderItem}
        keyExtractor={item => item.id.toString()}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );
};

export default StyleListDemo;

✅ 案例 4：全局样式实战 - 项目级样式规范（常量抽离 + 全局复用）

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

// 全局样式常量抽离
const COLOR = { PRIMARY: '#2196F3', TEXT_MAIN: '#333', TEXT_SECOND: '#666', BG_GRAY: '#f5f5f5' };
const FONT = { BIG:20, NORMAL:16, SMALL:14 };
const PADDING = { NORMAL:12, BIG:15 };

// 页面样式
const styles = StyleSheet.create({
  container: { flex:1, backgroundColor:COLOR.BG_GRAY, padding:PADDING.BIG },
  pageTitle: { fontSize:FONT.BIG, color:COLOR.PRIMARY, fontWeight:'600', textAlign:'center' },
  section: { marginTop:PADDING.NORMAL, backgroundColor:'#fff', padding:PADDING.NORMAL, borderRadius:8 },
  sectionTitle: { fontSize:FONT.NORMAL, color:COLOR.TEXT_MAIN, fontWeight:'500' },
  sectionContent: { fontSize:FONT.SMALL, color:COLOR.TEXT_SECOND, marginTop:8, lineHeight:22 }
});

const GlobalStyleDemo = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.pageTitle}>项目级样式规范</Text>
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>样式常量抽离</Text>
        <Text style={styles.sectionContent}>统一管理主题色、字体、间距，一处修改全局生效，提升项目可维护性</Text>
      </View>
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>样式复用原则</Text>
        <Text style={styles.sectionContent}>公共样式抽离为全局样式，页面样式单独编写，避免冗余代码，保持代码整洁</Text>
      </View>
    </View>
  );
};

export default GlobalStyleDemo;

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

# react native # harmonyos # react.js
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

Flutter 框架跨平台鸿蒙开发 —— 数据映射与归一化：构建高性能鸿蒙自定义图表

avatar 人工智能6S服务平台
cover

React Native 鸿蒙跨平台开发：LayoutAnimation 实现鸿蒙端页面切换的淡入淡出过渡动画

avatar 人工智能6S服务平台
cover

Flutter for OpenHarmony 实战：RangeSlider 范围滑块详解

avatar 人工智能6S服务平台