【HarmonyOS】day37:React Native实战项目+关键词高亮搜索Hook

【HarmonyOS】React Native实战项目+关键词高亮搜索Hook

📅 更新时间：2026年2月
🎯 技术栈：HarmonyOS NEXT + React Native 0.72.5 + TypeScript
⏱️ 阅读时间：约15分钟

前言

进入2026年，移动端开发格局已发生根本性变化。随着HarmonyOS NEXT彻底剥离AOSP，开发者面临着Android、iOS、HarmonyOS三足鼎立的局面。如何用一套代码高效覆盖三大平台？

本文将带你从零开始，在HarmonyOS上搭建React Native开发环境，并实现一个实用的关键词高亮搜索Hook，让你的应用具备专业的搜索体验。

一、技术背景与挑战分析

1.1 平台渲染架构对比

特性	React Native (Android/iOS)	React Native (HarmonyOS)
渲染引擎	原生组件映射	ArkUI原生组件映射
桥接方式	JavaScript Bridge	C-API + 鸿蒙桥接库
开发工具	Xcode/Android Studio	DevEco Studio 5.0+
最低版本	API 21+	API 10+ (HarmonyOS 4.0+)

1.2 为什么选择RNOH方案？

React Native for OpenHarmony (RNOH) 是华为官方推出的鸿蒙化适配方案，相比其他跨平台方案有以下优势：

✅ 复用现有代码：现有React Native项目迁移成本降低60%+
✅ 原生渲染性能：非WebView套壳，UI渲染丝滑流畅
✅ 鸿蒙生态能力：支持分布式设备管理、原子化服务等特性
✅ 社区活跃：2026年已有大量三方库完成鸿蒙适配

二、环境搭建（10分钟快速上手）

2.1 核心工具安装

1# 1. 下载 DevEco Studio 5.0+
2# 官网：https://developer.huawei.com/consumer/cn/deveco-studio
3
4# 2. 安装Node.js (推荐 v18+)
5node -v  # 验证版本
6
7# 3. 安装React Native CLI
8npm install -g @react-native-community/cli
9
10# 4. 安装RNOH依赖
11npm install @rnoh/react-native-openharmony@0.72.5
12

2.2 创建项目结构

1# 创建React Native项目
2npx react-native init HarmonySearchApp --template @rnoh/react-native-openharmony-template
3
4# 项目结构
5HarmonySearchApp/
6├── App.tsx
7├── src/
8│   ├── components/
9│   ├── hooks/
10│   │   └── useHighlightSearch.ts  # 核心Hook
11│   └── utils/
12├── harmony/  # 鸿蒙原生代码目录
13└── package.json
14

2.3 配置oh-package.json5

1// harmony/oh-package.json5
2{
3  "name": "harmonysearchapp",
4  "version": "1.0.0",
5  "dependencies": {
6    "@rnoh/react-native-openharmony": "0.72.5",
7    "@ohos/react-native": "0.72.5"
8  }
9}
10

三、核心功能实现：关键词高亮搜索Hook

3.1 Hook设计原理

关键词高亮的核心思路：

接收原始文本和搜索关键词
使用正则表达式匹配关键词
将文本拆分为普通片段和高亮片段
返回可渲染的数组结构

3.2 useHighlightSearch Hook 完整实现

1// src/hooks/useHighlightSearch.ts
2import { useMemo } from 'react';
3import { TextStyle } from 'react-native';
4
5interface HighlightPart {
6  text: string;
7  isHighlighted: boolean;
8  id: string;
9}
10
11interface UseHighlightSearchOptions {
12  caseSensitive?: boolean;  // 是否区分大小写
13  multipleKeywords?: boolean; // 是否支持多关键词
14  highlightStyle?: TextStyle; // 高亮样式
15}
16
17export function useHighlightSearch(
18  text: string,
19  keywords: string | string[],
20  options: UseHighlightSearchOptions = {}
21) {
22  const {
23    caseSensitive = false,
24    multipleKeywords = false,
25    highlightStyle = { backgroundColor: '#FFEB3B', color: '#000' }
26  } = options;
27
28  // 使用 useMemo 优化性能，避免重复计算
29  const highlightParts: HighlightPart[] = useMemo(() => {
30    if (!text || !keywords) {
31      return [{ text, isHighlighted: false, id: 'default' }];
32    }
33
34    // 标准化关键词数组
35    const keywordArray = Array.isArray(keywords) ? keywords : [keywords];
36    const validKeywords = keywordArray.filter(k => k && k.trim());
37
38    if (validKeywords.length === 0) {
39      return [{ text, isHighlighted: false, id: 'default' }];
40    }
41
42    // 构建正则表达式
43    const flags = caseSensitive ? 'g' : 'gi';
44    const escapedKeywords = validKeywords.map(k => 
45      k.replace(/[.*+?^${}()|[$$\$$/g, '\\$&') // 转义特殊字符
46    );
47    
48    const pattern = multipleKeywords 
49      ? [`(${escapedKeywords.join('|')})`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.join.md)
50      : `(${escapedKeywords[0]})`;
51    
52    const regex = new RegExp(pattern, flags);
53
54    // 拆分文本并标记高亮部分
55    const parts: HighlightPart[] = [];
56    let lastIndex = 0;
57    let match;
58
59    // 重置正则的lastIndex
60    regex.lastIndex = 0;
61    
62    while ((match = regex.exec(text)) !== null) {
63      // 添加匹配前的普通文本
64      if (match.index > lastIndex) {
65        parts.push({
66          text: text.slice(lastIndex, match.index),
67          isHighlighted: false,
68          id: `normal-${lastIndex}`
69        });
70      }
71
72      // 添加高亮文本
73      parts.push({
74        text: match[0],
75        isHighlighted: true,
76        id: `highlight-${match.index}`
77      });
78
79      lastIndex = regex.lastIndex;
80    }
81
82    // 添加剩余文本
83    if (lastIndex < text.length) {
84      parts.push({
85        text: text.slice(lastIndex),
86        isHighlighted: false,
87        id: `normal-${lastIndex}`
88      });
89    }
90
91    return parts.length > 0 ? parts : [{ text, isHighlighted: false, id: 'default' }];
92  }, [text, keywords, caseSensitive, multipleKeywords]);
93
94  return { highlightParts, highlightStyle };
95}
96

3.3 高亮文本渲染组件

1// src/components/HighlightText.tsx
2import React from 'react';
3import { Text, TextStyle, View } from 'react-native';
4import { useHighlightSearch } from '../hooks/useHighlightSearch';
5
6interface HighlightTextProps {
7  content: string;
8  keywords: string | string[];
9  caseSensitive?: boolean;
10  multipleKeywords?: boolean;
11  highlightStyle?: TextStyle;
12  normalStyle?: TextStyle;
13}
14
15export const HighlightText: React.FC<HighlightTextProps> = ({
16  content,
17  keywords,
18  caseSensitive = false,
19  multipleKeywords = false,
20  highlightStyle,
21  normalStyle
22}) => {
23  const { highlightParts, highlightStyle: defaultStyle } = useHighlightSearch(
24    content,
25    keywords,
26    { caseSensitive, multipleKeywords, highlightStyle }
27  );
28
29  return (
30    <Text>
31      {highlightParts.map((part) => (
32        <Text
33          key={part.id}
34          style={part.isHighlighted ? defaultStyle : normalStyle}
35        >
36          {part.text}
37        </Text>
38      ))}
39    </Text>
40  );
41};
42

四、实战应用：搜索结果列表

4.1 搜索页面完整示例

1// src/pages/SearchPage.tsx
2import React, { useState, useCallback } from 'react';
3import {
4  View,
5  TextInput,
6  FlatList,
7  Text,
8  StyleSheet,
9  SafeAreaView
10} from 'react-native';
11import { HighlightText } from '../components/HighlightText';
12
13interface NewsItem {
14  id: string;
15  title: string;
16  summary: string;
17  date: string;
18}
19
20// 模拟数据
21const MOCK_NEWS: NewsItem[] = [
22  {
23    id: '1',
24    title: 'HarmonyOS NEXT正式发布，生态应用突破10万',
25    summary: '华为宣布HarmonyOS NEXT正式商用，原生应用生态快速成长...',
26    date: '2026-02-19'
27  },
28  {
29    id: '2',
30    title: 'React Native鸿蒙适配进展：主流库覆盖率超80%',
31    summary: 'RNOH社区持续发力，常用三方库基本完成鸿蒙适配...',
32    date: '2026-02-18'
33  },
34  {
35    id: '3',
36    title: '2026跨平台开发趋势：三足鼎立格局形成',
37    summary: 'Android、iOS、HarmonyOS三大平台并存，开发者需掌握多端能力...',
38    date: '2026-02-17'
39  }
40];
41
42export const SearchPage: React.FC = () => {
43  const [searchQuery, setSearchQuery] = useState('');
44  const [filteredData, setFilteredData] = useState<NewsItem[]>(MOCK_NEWS);
45
46  // 防抖搜索处理
47  const handleSearch = useCallback((query: string) => {
48    setSearchQuery(query);
49    
50    if (!query.trim()) {
51      setFilteredData(MOCK_NEWS);
52      return;
53    }
54
55    const keywords = query.toLowerCase().split(/\s+/).filter(Boolean);
56    const filtered = MOCK_NEWS.filter(item =>
57      item.title.toLowerCase().includes(query.toLowerCase()) ||
58      item.summary.toLowerCase().includes(query.toLowerCase())
59    );
60    
61    setFilteredData(filtered);
62  }, []);
63
64  const renderNewsItem = ({ item }: { item: NewsItem }) => (
65    <View style={styles.newsCard}>
66      <HighlightText
67        content={item.title}
68        keywords={searchQuery}
69        highlightStyle={styles.highlight}
70        normalStyle={styles.title}
71        multipleKeywords
72      />
73      <HighlightText
74        content={item.summary}
75        keywords={searchQuery}
76        highlightStyle={styles.highlightSummary}
77        normalStyle={styles.summary}
78        multipleKeywords
79      />
80      <Text style={styles.date}>{item.date}</Text>
81    </View>
82  );
83
84  return (
85    <SafeAreaView style={styles.container}>
86      <TextInput
87        style={styles.searchInput}
88        placeholder="搜索新闻..."
89        value={searchQuery}
90        onChangeText={handleSearch}
91        clearButtonMode="while-editing"
92      />
93      
94      <FlatList
95        data={filteredData}
96        renderItem={renderNewsItem}
97        keyExtractor={item => item.id}
98        ListEmptyComponent={
99          <Text style={styles.emptyText}>暂无搜索结果</Text>
100        }
101      />
102    </SafeAreaView>
103  );
104};
105
106const styles = StyleSheet.create({
107  container: {
108    flex: 1,
109    backgroundColor: '#f5f5f5'
110  },
111  searchInput: {
112    margin: 16,
113    padding: 12,
114    backgroundColor: '#fff',
115    borderRadius: 8,
116    fontSize: 16,
117    borderWidth: 1,
118    borderColor: '#e0e0e0'
119  },
120  newsCard: {
121    marginHorizontal: 16,
122    marginBottom: 12,
123    padding: 16,
124    backgroundColor: '#fff',
125    borderRadius: 8,
126    elevation: 2
127  },
128  title: {
129    fontSize: 16,
130    fontWeight: '600',
131    color: '#333',
132    marginBottom: 8
133  },
134  highlight: {
135    fontSize: 16,
136    fontWeight: '600',
137    backgroundColor: '#FFEB3B',
138    color: '#000',
139    borderRadius: 2,
140    paddingHorizontal: 2
141  },
142  summary: {
143    fontSize: 14,
144    color: '#666',
145    lineHeight: 20,
146    marginBottom: 8
147  },
148  highlightSummary: {
149    fontSize: 14,
150    backgroundColor: '#FFF9C4',
151    color: '#000',
152    borderRadius: 2,
153    paddingHorizontal: 2
154  },
155  date: {
156    fontSize: 12,
157    color: '#999',
158    textAlign: 'right'
159  },
160  emptyText: {
161    textAlign: 'center',
162    color: '#999',
163    marginTop: 40,
164    fontSize: 16
165  }
166});
167

五、HarmonyOS平台专项优化

5.1 性能优化建议

1// 1. 使用 useMemo 缓存计算结果
2const highlightParts = useMemo(() => {
3  // 高亮计算逻辑
4}, [text, keywords, caseSensitive]);
5
6// 2. 长列表使用 FlatList 虚拟化
7<FlatList
8  data={data}
9  renderItem={renderItem}
10  windowSize={5}  // 减少渲染窗口
11  initialNumToRender={10}
12  maxToRenderPerBatch={10}
13/>
14
15// 3. 大文本分段处理
16const CHUNK_SIZE = 1000; // 每段最大字符数
17

5.2 HarmonyOS特有注意事项

问题	解决方案
特殊字符转义	使用 `replace(/[.*+?^${}()
中文分词	建议服务端预处理或集成分词库
长文本渲染	分段渲染 + 虚拟列表
多语言支持	使用 Intl API 处理区域化

5.3 真机调试配置

1# 1. 连接华为真机（HarmonyOS 3.0+）
2# 开启开发者模式 + USB调试
3
4# 2. 运行应用
5cd harmony
6hvigorw assembleHap --mode module
7
8# 3. 安装到设备
9hdc install entry/build/default/outputs/default/entry-default-signed.hap
10
11# 4. 查看日志
12hdc shell hilog
13

六、扩展功能：高级搜索场景

6.1 多关键词同时高亮

1// 支持空格分隔的多个关键词
2const keywords = searchQuery.split(/\s+/).filter(Boolean);
3
4<HighlightText
5  content={text}
6  keywords={keywords}
7  multipleKeywords={true}
8/>
9

6.2 自定义高亮渲染器

1interface HighlightTextProps {
2  renderHighlight?: (text: string, index: number) => React.ReactNode;
3}
4
5// 使用自定义渲染
6<HighlightText
7  content={text}
8  keywords={keywords}
9  renderHighlight={(text, index) => (
10    <Text key={index} style={styles.customHighlight}>
11      🔍 {text}
12    </Text>
13  )}
14/>
15

6.3 搜索统计信息

1// 扩展Hook返回匹配数量
2export function useHighlightSearchWithCount(...) {
3  const { highlightParts, highlightStyle } = useHighlightSearch(...);
4  
5  const matchCount = highlightParts.filter(p => p.isHighlighted).length;
6  
7  return { highlightParts, highlightStyle, matchCount };
8}
9
10// 使用
11const { matchCount } = useHighlightSearchWithCount(text, keywords);
12<Text>找到 {matchCount} 处匹配</Text>
13

七、常见问题与解决方案

Q1: 特殊字符导致正则报错？

1// 解决方案：转义特殊字符
2const escapeRegex = (str: string) => 
3  str.replace(/[.*+?^${}()|[$$\$$/g, '\\$&');
4

Q2: 长文本性能卡顿？

1// 解决方案：限制处理长度 + 虚拟列表
2const MAX_TEXT_LENGTH = 5000;
3const truncatedText = text.slice(0, MAX_TEXT_LENGTH);
4

Q3: 鸿蒙平台样式不生效？

1// 解决方案：使用内联样式，避免复杂选择器
2style={{ backgroundColor: '#FFEB3B' }} // ✅
3style={styles.highlight} // ⚠️ 需确保样式兼容
4

八、效果图

在这里插入图片描述

九、总结与展望

核心收获

✅ 环境搭建：10分钟完成HarmonyOS + React Native开发环境配置
✅ Hook封装：可复用的关键词高亮搜索Hook，支持多场景
✅ 性能优化：针对HarmonyOS平台的专项优化策略
✅ 实战应用：完整的搜索结果列表页面实现

2026年技术趋势

趋势	影响
HarmonyOS市场份额达42%	鸿蒙开发成为必备技能
RNOH生态成熟	三方库覆盖率超80%
AI辅助开发普及	代码生成效率提升50%+

后续学习路线

1基础入门 → 进阶实战 → 性能优化 → 生态贡献
2   ↓           ↓           ↓           ↓
3环境搭建   完整项目    深度调优    开源贡献
4

参考资源

💡 小贴士：本文代码已在OpenHarmony 6.0.0 + React Native 0.72.5环境验证通过。如有问题，欢迎在评论区交流讨论！

觉得有用？点赞+收藏+关注，获取更多鸿蒙开发干货！ 🚀

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

《【HarmonyOS】day37:React Native实战项目+关键词高亮搜索Hook》是转载文章，点击查看原文。