这两年鸿蒙设备越来越多，我身边不少做移动端的朋友都在纠结同一个问题：要不要单独学一套 ArkUI？以前积累的 React 经验是不是就浪费了？我自己试了一圈之后，一个比较明确的感受是，React Native 跑到鸿蒙上这件事，已经不是一个“能不能跑”的问题，而是“跑得顺不顺、细节抠得细不细”的问题。这篇就从最基础也最容易出效果的文本装饰入手，带小白把 React Native 鸿蒙跨平台开发的环境、思路和一套可复用的花样文本玩法完整走一遍。

如果你是刚接触跨平台开发的小白，这篇文章会告诉你为什么选择 React Native 做鸿蒙应用不亏；如果你已经写过一点 React，那更简单，直接把它当成一套“在鸿蒙上继续用 React 语法写界面”的升级教程。我们不做那种贴一堆概念然后跑不起来的演示，全程围绕真实项目里的文本渲染需求，把下划线、删除线、阴影、富文本、渐变这些装饰效果一个个实现，顺带把刚入门最容易踩的启动白屏、字体失效、样式不生效这些坑都排掉。

1. 为什么选 React Native 做鸿蒙应用

1.1 React Native 能为鸿蒙带来什么

先把这个概念钉死：React Native 不是把网页套进一个壳里，而是用 React 的组件化思维写界面，最终在原生平台渲染出真正的原生控件。放到鸿蒙场景里，就是用熟悉的 JavaScript/TypeScript 编写业务逻辑和 UI 结构，鸿蒙端通过适配层把声明式组件映射到 ArkUI 原生组件上。

这意味着什么？意味着公司里已有的 React 前端团队不用从零转 ArkTS，意味着社区里成熟的 RN 生态库可以拿来就用，意味着你写的那套业务代码，可以同时覆盖 Android、iOS、鸿蒙甚至 Web。对鸿蒙这种新生态来说，谁能让开发成本快速降下来，谁就能更快抢占应用市场。RN 和鸿蒙的这套组合，解决的根本问题就是：不要每个平台都重新造一遍轮子。

我还记得第一次把一套已经上线的 RN 项目迁移到鸿蒙模拟器上的场景。原本以为要大改 UI 层，结果核心业务页面基本没动，反而是在样式适配和原生模块对接上花了不少时间。这也侧面说明了一个事实：RN 鸿蒙化并不是空中楼阁，它已经能支撑真实业务。

1.2 和原生 ArkUI 开发怎么选

有人问：直接用华为推荐的 ArkUI 开发不是更地道吗？这话没错，但要看你的处境。

我的建议很直接：如果你已经有 RN 项目，或者团队里前端资源充足，就毫不犹豫选 RN；如果你做的是纯鸿蒙独占的深度应用，并且团队铁了心只做鸿蒙，那学 ArkUI 更划算。大部分团队的现状其实是既要又要，RN 鸿蒙化正好补上了这一环。

2. 环境搭建与跑通第一个页面

2.1 开发环境准备

写 RN 鸿蒙应用之前，机器上得先有一整套组合工具。我没法保证每个版本都适合你，但方向上基本是稳定的：

• 安装 Node.js 18 及以上版本，用来跑 npm 和 Metro 打包服务。
• 安装 DevEco Studio，这是鸿蒙开发的主战场，负责编译、签名、安装到模拟器或真机。
• 在 DevEco Studio 里配置好 HarmonyOS SDK 和 OpenHarmony SDK，具体版本要看你的设备系统版本。
• 准备好鸿蒙模拟器，或者一台开了开发者模式的真机。

这套环境装完，我建议先在命令行验证一下 Node 能力：

node -v npm -v

然后利用社区提供的脚手架初始化一个 RN 鸿蒙工程。市面上不同的脚手架命令可能存在差异，但大致流程是一样的：通过 npx 拉取模板，生成 Windows 或 macOS 环境下可开发的 React Native 项目，同时在项目里生成一个 harmony 目录，里面就是鸿蒙原生工程。

提示：初始化过程中可以顺带把 TypeScript 模板选上，后面写代码能省掉不少低级类型错误。

2.2 跑通鸿蒙模拟器或真机

工程生成之后，别急着写业务代码，先确认环境链路是通的。这里分享一次我踩过的坑：项目初始化完成后，我在 DevEco Studio 里打开 harmony 目录，点了一下运行，结果模拟器黑屏了很久。谁知道，不是鸿蒙启动慢，而是 Metro 服务没有跑起来。

正确的操作是先在项目根目录启动 Metro：

npm start

然后在 DevEco Studio 里运行 harmony 工程。这样模拟器加载的时候才能从 Metro 拉取 JavaScript bundle。首次启动如果一直停在启动页，通常不是鸿蒙的问题，而是 Metro 没启动，或者设备网络没法访问开发机的 Metro 端口。

还有个容易被忽略的点：真机调试时必须保证手机和电脑在同一个局域网，并且鸿蒙应用有网络权限。很多新手一上来就开飞行模式测试，结果白屏，接着就开始怀疑人生，其实只是网络问题。

2.3 项目结构速览

跑通以后，你会看到项目里有一套标准的 RN 结构。重点认识这几个：

• App.tsx：入口组件，所有界面代码都可以从这里开始。
• index.js：注册入口，把 App 组件挂到 RN 运行时。
• harmony：鸿蒙原生工程目录，一般不需要频繁修改。
• metro.config.js：Metro 打包配置，偶尔会用到。
• package.json：依赖管理，这里能看到 react-native、react 的版本。

对我来说，入门阶段只需要在App.tsx里改代码就够了。等到需要接原生能力、改打包配置时，再去碰其他文件。

3. 理解 Text 组件：文本装饰的地基

3.1 文本装饰的入口在样式属性上

React Native 里的文本渲染和 Web 不完全一样，但核心思路是互通的。文本装饰就在Text组件的style属性上做文章。最基本的几个属性包括：

• fontSize：字号，注意鸿蒙上的默认字号渲染和 Android 差异不大，但建议显式设置。
• color：文字颜色。
• fontWeight：字重，支持normal、bold、或数字100到900。
• fontStyle：是否斜体，normal或italic。
• textAlign：对齐方式，left、center、right。
• lineHeight：行高，控制多行文字的疏密。
• letterSpacing：字间距，做标题或强调文案时很好用。

举个最简单的例子：

import React from 'react'; import { Text, View } from 'react-native'; const App = () => { return ( <View style={{ padding: 20 }}> <Text style={{ fontSize: 24, fontWeight: '700', color: '#333' }}> 基础文本样式 </Text> <Text style={{ fontSize: 14, lineHeight: 22, letterSpacing: 2 }}> 这是一段设置行高和字间距的文字，阅读起来会更舒服一些。 </Text> </View> ); }; export default App;

这些属性谈不上复杂，但真想做出“有设计感”的文本，只靠它们还不够。下面要聊的装饰属性才是重点。

3.2 下划线、删除线与更多装饰属性

很多人习惯用underline来表示链接，用删除线来表示已失效信息。React Native 里负责这一块的属性是textDecorationLine，它支持这些取值：

• none：无任何线。
• underline：下划线。
• line-through：删除线。
• underline line-through：同时存在下划线和删除线。

可以配合textDecorationStyle设置线的样式：solid实线、double双线、dotted点线、dashed虚线。再有textDecorationColor可以单独指定线的颜色。

这里有个很实用的细节：装饰线颜色可以和文字颜色不同。比如标题文字是深灰色，下划线却是品牌绿色，设计感一下子就上来了。

<Text style={{ fontSize: 20, color: '#333', textDecorationLine: 'underline line-through', textDecorationStyle: 'dashed', textDecorationColor: '#e74c3c' }}> 带有多重装饰的文本 </Text>

第一次运行时你可能发现虚线在鸿蒙上显示成实线，这是因为某些版本的鸿蒙渲染层没有完整实现dashed样式。遇到这种情况，我的建议是不要死磕原生适配，先用系统能力最稳定的方案，再在视觉上通过颜色或字重找补。

3.3 文本阴影与立体感

阴影是文本装饰里提升视觉层次最有效的手段。React Native 提供了三个关键属性：

• textShadowColor：阴影颜色。
• textShadowOffset：阴影偏移，对象形式{ width, height }。
• textShadowRadius：阴影模糊半径。

一个常见做法是用浅色阴影模拟“浮起来”的效果：

<Text style={{ fontSize: 32, fontWeight: 'bold', color: '#fff', textShadowColor: 'rgba(0, 0, 0, 0.4)', textShadowOffset: { width: 2, height: 2 }, textShadowRadius: 4 }}> 浮影标题 </Text>

在某些古早的 RN 版本里，设置textShadowOffset之后忘了给textShadowRadius，会导致阴影边缘锐利得很难看；反过来，半径太大又会让文字发虚。我的参数习惯是：小标题阴影半径 2 到 4，大标题半径 6 到 10，透明度控制在 0.2 到 0.5 之间。

3.4 嵌套文本与部分装饰

实际业务里最常遇到的需求不是整段文字统一装饰，而是“一句话里某个词特别强调”，比如活动文案里的价格、法规条款里的免责声明。React Native 的Text组件支持嵌套，这就成了实现部分装饰的关键。

下面这段代码展示了怎么在一个大段文字里混入不同样式：

<Text style={{ fontSize: 16, lineHeight: 24 }}> 本次活动的 <Text style={{ color: '#e74c3c', fontWeight: 'bold', textDecorationLine: 'underline' }}> 早鸟价 </Text> 仅限前一百名用户，逾期恢复原价。 </Text>

嵌套Text不只是样式叠加，它还可以改变文本语义。你可以在嵌套层里给文字加点击事件，也可以让同一段文字的不同片段拥有不同的onPress行为。这种能力在做富文本协议、产品介绍、聊天消息时非常实用。

有一点要注意：嵌套层级不要太深。我曾见过嵌套五六层的组件，最后不仅性能下降，逻辑也混乱。一般的经验是：能用样式对象抽离解决的，就别硬套多层嵌套。

3.5 文本渐变与高级视觉效果

这算是文本装饰里稍微进阶一点的操作。React Native 自带能力里没有“文字渐变”这种属性，但我们可以配合线性渐变组件，实现常见的渐变字效果。

思路很简单：用一个渐变背景组件撑起区域，然后在它内部放一个透明文字，让文字显示背景渐变。以社区常用的渐变库为例，大致代码如下：

import LinearGradient from 'react-native-linear-gradient'; <LinearGradient colors={['#ff6a00', '#ee0979']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={{ alignSelf: 'baseline' }} > <Text style={{ fontSize: 36, fontWeight: 'bold', color: 'transparent', backgroundColor: 'transparent' }} > 渐变标题 </Text> </LinearGradient>

原理并不复杂，用户在视觉上看到的是渐变色从半透明文字区域透出来。这种玩法在活动海报、品牌宣传页里出镜率极高，唯一需要注意的是：透明文字在部分鸿蒙版本上可能因为抗锯齿出现边缘发虚，建议加一点点文字阴影来覆盖瑕疵。

4. 实战拆解：做一个花式文本展示台

4.1 页面设计与组件拆分

讲了一堆属性，不做个能跑的东西总感觉不够踏实。我带你做一个“花式文本展示台”页面，把前面聊的装饰属性全部用上。

页面拆成三个区域：

• 顶部标题区：展示带阴影的品牌标题。
• 中部装饰列表区：展示下划线、删除线、双线、虚线等不同装饰效果。
• 底部交互区：通过点击按钮，切换标题文本的装饰模式，让用户直观感受到样式变化。

这么设计的原因很简单：展示型页面能最大限度暴露不同装饰属性之间的配合关系，而点击切换又能帮你理解 React Native 状态变化如何驱动样式更新。对小白来说，这是最快建立“状态驱动 UI”认知的路径。

4.2 核心代码实现

新建一个App.tsx，把下面的内容填进去。

import React, { useState } from 'react'; import { SafeAreaView, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; const App = () => { const [decorationIndex, setDecorationIndex] = useState(0); const decorationStyles = [ { textDecorationLine: 'none' as const }, { textDecorationLine: 'underline' as const }, { textDecorationLine: 'line-through' as const }, { textDecorationLine: 'underline line-through' as const, textDecorationStyle: 'dashed' as const, textDecorationColor: '#e74c3c' } ]; const currentDecoration = decorationStyles[decorationIndex]; return ( <SafeAreaView style={styles.container}> <ScrollView contentContainerStyle={styles.content}> <Text style={styles.pageTitle}>花式文本展示台</Text> <Text style={[styles.demoTitle, currentDecoration]}> {`当前装饰模式：第 ${decorationIndex + 1} 种`} </Text> <View style={styles.card}> <Text style={styles.sectionTitle}>基础样式</Text> <Text style={styles.baseText}>字号 24，行高 32，字间距 2</Text> <Text style={styles.baseText}> 换行的文字可以看到 {'\n'} 行高带来的阅读变化 </Text> </View> <View style={styles.card}> <Text style={styles.sectionTitle}>阴影标题</Text> <Text style={styles.shadowText}>营销标题就该有层次</Text> </View> <View style={styles.card}> <Text style={styles.sectionTitle}>嵌套富文本</Text> <Text style={styles.richText}> 这套方案适合 <Text style={styles.highlight}> 高亮关键词 </Text> 也能 <Text style={styles.link}> 模拟链接样式 </Text> </Text> </View> <TouchableOpacity style={styles.button} onPress={() => setDecorationIndex((prev) => (prev + 1) % decorationStyles.length)} > <Text style={styles.buttonText}>点击切换装饰</Text> </TouchableOpacity> </ScrollView> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5f6fa' }, content: { padding: 20 }, pageTitle: { fontSize: 28, fontWeight: '800', color: '#2f3542', textAlign: 'center', textShadowColor: 'rgba(0, 0, 0, 0.1)', textShadowOffset: { width: 1, height: 2 }, textShadowRadius: 3, marginBottom: 16 }, demoTitle: { fontSize: 20, fontWeight: 'bold', color: '#2f3542', textAlign: 'center', marginBottom: 20 }, card: { backgroundColor: '#ffffff', borderRadius: 12, padding: 16, marginBottom: 16 }, sectionTitle: { fontSize: 16, fontWeight: 'bold', color: '#57606f', marginBottom: 8 }, baseText: { fontSize: 24, lineHeight: 32, letterSpacing: 2, color: '#2f3542' }, shadowText: { fontSize: 26, fontWeight: 'bold', color: '#ffffff', textShadowColor: 'rgba(0, 0, 0, 0.35)', textShadowOffset: { width: 2, height: 3 }, textShadowRadius: 5, backgroundColor: '#57606f', padding: 12, borderRadius: 8 }, richText: { fontSize: 16, lineHeight: 24, color: '#2f3542' }, highlight: { color: '#e74c3c', fontWeight: 'bold', backgroundColor: '#ffeaa7' }, link: { color: '#0984e3', textDecorationLine: 'underline' }, button: { backgroundColor: '#3742fa', paddingVertical: 12, paddingHorizontal: 24, borderRadius: 24, alignItems: 'center', alignSelf: 'center', marginTop: 8 }, buttonText: { color: '#ffffff', fontSize: 16, fontWeight: 'bold' } }); export default App;

这套代码里有个值得注意的点：StyleSheet.create生成的样式对象，需要和动态样式数组绑定。React Native 会用数组后面的样式覆盖前面的同名属性，所以currentDecoration里定义的textDecorationLine能够覆盖demoTitle里的默认值。这种组合方式是 RN 中动态改样式的常用手法。

4.3 交互状态与样式联动

按钮点击的逻辑非常直白：useState维护一个索引，每次点击让索引在 0 到 3 之间循环，然后把对应的装饰样式对象丢进样式的数组里。你不需要写复杂的条件渲染，也不需要重建整棵组件树，React 会自动对比前后状态，更新需要变化的那一小块 UI。

如果你把这段代码跑起来，能观察到几个细节：

• 点击按钮后，顶部标题的装饰线变化是即时响应的。
• 无论装饰模式怎么切，其他卡片不受影响。
• 整个页面没有闪屏或重新加载的感觉。

这也是 React Native 声明式 UI 的典型表现：你只关注“数据是什么样”，而不是“每一步怎么操作 DOM/原生视图”。鸿蒙端同样接住了这套逻辑。

5. 常见问题与避坑实录

5.1 字体加载与 fontFamily 的差异

文本装饰再漂亮，字体不对也白搭。鸿蒙系统内置的字体族名和 Android/iOS 不完全一致，直接指定fontFamily时可能出现字体失效，甚至在某些版本上回退到默认字体。

我建议这么做：优先用系统默认字体；万一设计稿指定了特定字体文件，就通过原生模块或字体资源加载方式把字体包打进去。在 React Native 里，字体体积过大会拖慢启动速度，所以非必要不上自定义字体。

如果你发现用fontWeight的bold没变化，可以先确认字体文件本身是否包含粗体字重。很多下载的免费字体只有 regular 一种字重，代码里设bold自然没有效果。

5.2 Metro 不启动导致的白屏

“react native 启动白屏”这个热点词在鸿蒙场景里出现的频率也不低。绝大多数原因都一样：Metro 打包服务没跑起来，或者真机连不上 Metro。

排查顺序我总结成四步：

1. 确认终端里npm start是运行状态，Metro 日志有没有报错。
2. 确认 DevEco Studio 的 harmony 工程配置了正确的调试入口，IP 指向开发机。
3. 确认真机和开发机在同一局域网，鸿蒙应用有网络权限。
4. 摇一摇设备或使用调试菜单，尝试手动重新加载 bundle。

这四步能解决九成以上的白屏问题。剩下的一成，多半是 Metro 缓存混乱，执行一下：

npx react-native start --reset-cache

再重新跑一次。

5.3 textDecorationStyle 的兼容性

前面提到过，虚线、双线这类装饰样式在鸿蒙上可能无法完全呈现。我的处理原则是：先按设计稿写，再在鸿蒙真机上验证。如果发现渲染效果不一致，优先调整设计，而不是强行改原生代码。因为文本装饰线本身属于细节视觉，用户不会盯着看太久，不值得为此付出额外维护成本。

5.4 调试与热更新技巧

DevEco Studio 自身有完善的 ArkUI 调试能力，但 RN 场景下，我更常用的还是 Metro 里的日志输出和 React DevTools。遇到样式问题时，打开调试器，选中对应的 Text 节点，直接查看样式属性是否被正确解析。这一步比来回改代码更快。

热更新偶尔会失灵，尤其是新增原生依赖后。这时不要老想着哪里写错了，先把 Metro 停了，重新执行启动命令，再让应用重新加载 bundle，绝大多数情况下都能恢复。

最后分享一个小技巧：文本装饰想要显得高级，关键不在于属性用得多，而在于克制。一组页面里，下划线留给链接，删除线留给限时失效信息，阴影只留给大标题，其他文本保持干净。这样既不会让用户眼花，又能让真正重要的信息第一时间被看到。我一开始做展示页时把所有特效堆在一起，效果反而很土，后来做减法才找到感觉。你在自己的项目里也可以试试“少即是多”的装饰原则。