react-native-elements 鸿蒙使用说明（精简版）

完整介绍、踩坑与组件矩阵请优先阅读根目录 README.md。
仓库：https://gitcode.com/aasd23/rntpc_react-native-elements

鸿蒙示例（一页组件墙）

仓库内可运行示例：

example/harmony

单页展示 Button、Card、ListItem、Input、SearchBar、Switch、Slider、Overlay 等。
运行说明见 example/harmony/README.md。

cd example/harmony
npm install
npm run dev
# DevEco 打开 example/harmony/harmony ，Run entry

简介

本仓库基于上游 react-native-elements v3.4.3 进行 OpenHarmony / HarmonyOS NEXT（RNOH）适配。

库本身以纯 JS/TS 组件为主，核心改动是平台判断与触摸反馈策略：

• 样式与 Switch / Chevron 等走 Android 类行为（isAndroidLike）
• 不使用 Android 专属的 TouchableNativeFeedback / Ripple（鸿蒙走 TouchableOpacity）

环境要求

工具	建议版本
Node.js	18+（RNOH 0.84 建议 22.11+）
React Native	与 RNOH 对齐（推荐 0.82）
RNOH	0.82.x 稳定版
DevEco Studio	6.0+
HarmonyOS SDK	6.1.1(23) 或更高

安装

源码 / Git 方式（适配验证推荐）

npm install git+https://gitcode.com/aasd23/rntpc_react-native-elements.git#feat/ohos_react-native-elements_3.4.3

本地路径调试：

# 在本库目录
npm link
# 在 Demo 工程
npm link react-native-elements

Peer 依赖

npm install react-native-vector-icons react-native-safe-area-context
# 若社区提供鸿蒙专用包，优先使用对应 OHOS 适配版本

图标字体配置（必做）

Icon、Button 的 icon、ListItem.Chevron、CheckBox、SearchBar 等依赖 react-native-vector-icons。

HarmonyOS 不支持 AutoLink，需要手动：

1. 将所需 .ttf 复制到鸿蒙工程，例如：
   harmony/entry/src/main/resources/rawfile/assets/fonts/
2. 在 Index.ets 的 RNApp 中注册，例如：

RNApp({
  rnInstanceConfig: {
    // ...
    fontResourceByFontFamily: {
      MaterialIcons: $rawfile('assets/fonts/MaterialIcons.ttf'),
      MaterialCommunityIcons: $rawfile(
        'assets/fonts/MaterialCommunityIcons.ttf'
      ),
      Ionicons: $rawfile('assets/fonts/Ionicons.ttf'),
      FontAwesome: $rawfile('assets/fonts/FontAwesome.ttf'),
      // 按实际用到的图标集补充
    },
  },
});

未注册字体会出现方块或空白图标，这是配置问题而非 elements 组件逻辑问题。

SearchBar 平台参数

SearchBar 的 platform 仅支持 'default' | 'ios' | 'android'。

在鸿蒙上请使用：

<SearchBar platform="default" placeholder="搜索..." value={q} onChangeText={setQ} />
// 或
<SearchBar platform="android" ... />

不要传 ios，除非刻意要 iOS 外观。

平台辅助方法

适配后可从 helpers 使用（源码侧）：

import {
  isHarmony,
  isAndroidLike,
  isIOS,
} from 'react-native-elements/dist/helpers';

方法	含义
isIOS	仅 iOS
isHarmony	Platform.OS 为 harmony 或 ohos
isAndroidLike	Android 或 Harmony（样式复用）

最小示例

import React, { useState } from 'react';
import { ScrollView, View, Text } from 'react-native';
import {
  Button,
  Card,
  Input,
  Avatar,
  Badge,
  SearchBar,
  ListItem,
  CheckBox,
  Switch,
} from 'react-native-elements';

export default function App() {
  const [q, setQ] = useState('');
  const [checked, setChecked] = useState(true);
  const [on, setOn] = useState(false);

  return (
    <ScrollView style={{ flex: 1, padding: 16 }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 16 }}>
        React Native Elements 鸿蒙 Demo
      </Text>
      <Button title="按钮" onPress={() => {}} />
      <View style={{ height: 12 }} />
      <Card>
        <Card.Title>卡片</Card.Title>
        <Card.Divider />
        <Text>鸿蒙端渲染验证</Text>
      </Card>
      <Input placeholder="请输入" label="输入框" />
      <Avatar rounded title="RN" />
      <Badge value="3" status="error" />
      <SearchBar
        platform="default"
        placeholder="搜索..."
        onChangeText={setQ}
        value={q}
      />
      <ListItem bottomDivider>
        <ListItem.Content>
          <ListItem.Title>列表项</ListItem.Title>
          <ListItem.Subtitle>副标题</ListItem.Subtitle>
        </ListItem.Content>
        <ListItem.Chevron />
      </ListItem>
      <CheckBox
        title="复选框"
        checked={checked}
        onPress={() => setChecked(!checked)}
      />
      <Switch value={on} onValueChange={setOn} />
    </ScrollView>
  );
}

已知限制

1. 图标：必须完成 vector-icons 字体注册。
2. Ripple：鸿蒙无 Material Ripple，按钮反馈为 Opacity。
3. Modal 类组件（Overlay / Dialog / Tooltip / BottomSheet）：依赖 RNOH 对 Modal 的支持，请在真机验证。
4. Platform.select：未单独写 harmony 键的样式会走 default；本次已对关键路径补齐 helpers / StatusBar。

分支

• 适配分支：feat/ohos_react-native-elements_3.4.3
• 基线标签：v3.4.3