这个纸片组件（Chip）演示应用采用了高度模块化的组件架构，通过清晰的职责分离实现了代码的复用性和可维护性。核心组件 Chip 作为独立的可复用单元，负责单个纸片的渲染和交互，而 ChipDemo 作为主容器，负责状态管理和不同类型纸片的展示。

可复用 Chip 组件设计

const Chip: React.FC<{ 
  label: string, 
  selected: boolean, 
  onPress: () => void, 
  color?: string 
}> = ({ label, selected, onPress, color = '#3B82F6' }) => {
  // 组件实现...
};

Chip 组件设计为高度可配置的通用组件，通过 props 接收标签文本、选中状态、点击回调和可选的颜色属性。这种设计使得组件可以在不同场景中灵活使用，只需传入不同的参数即可实现不同的视觉效果。默认颜色设置为 #3B82F6（蓝色），提供了合理的默认值，同时允许通过 color 属性自定义颜色。

状态管理

const [selectedChips, setSelectedChips] = useState<number[]>([]);
const [selectedColorChips, setSelectedColorChips] = useState<string[]>([]);

const toggleChip = (index: number) => {
  if (selectedChips.includes(index)) {
    setSelectedChips(selectedChips.filter(i => i !== index));
  } else {
    setSelectedChips([...selectedChips, index]);
  }
};

使用 useState Hook 管理选中的纸片状态，通过数组存储选中项的索引或值。toggleChip 函数实现了点击切换选中状态的逻辑，通过 filter 方法移除已选中的项，或通过扩展运算符添加新选中的项。这种状态管理方式简洁明了，适合处理多个选项的选择状态。

布局与视觉设计

纸片组件

<TouchableOpacity 
  style={[ 
    styles.chip, 
    selected && { 
      backgroundColor: color, 
      borderColor: color 
    } 
  ]} 
  onPress={onPress} 
> 
  <Text style={[ 
    styles.chipText, 
    selected && { color: '#ffffff' } 
  ]}> 
    {label} 
  </Text> 
</TouchableOpacity>

纸片组件使用 TouchableOpacity 实现点击交互，通过条件样式实现选中状态的视觉变化。选中时，背景色和边框色变为指定颜色，文本颜色变为白色，这种对比明显的视觉反馈有助于用户识别当前选择状态。

流式布局

<View style={styles.chipRow}>
  {categories.map((category, index) => (
    <Chip
      key={index}
      label={category}
      selected={selectedChips.includes(index)}
      onPress={() => toggleChip(index)}
    />
  ))}
</View>

纸片行使用 flexDirection: 'row' 和 flexWrap: 'wrap' 实现了流式布局，当一行放不下所有纸片时会自动换行。这种布局方式在展示多个标签时非常实用，能够适应不同尺寸的屏幕。

样式

const styles = StyleSheet.create({
  chip: {
    backgroundColor: '#ffffff',
    borderColor: '#cbd5e1',
    borderWidth: 1,
    borderRadius: 20,
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginRight: 8,
    marginBottom: 8,
    flexDirection: 'row',
    alignItems: 'center',
  },
  // 更多样式...
});

样式定义注重了细节，例如圆角、边距和对齐方式的设置，使得纸片组件看起来更加精致。通过 flexDirection: 'row' 和 alignItems: 'center' 确保了带图标的纸片能够正确对齐。

多种纸片

应用展示了四种不同类型的纸片变体：

  • 基础纸片：标准样式，用于分类选择
  • 彩色纸片：不同颜色的纸片，用于区分不同类别
  • 尺寸变体：小、中、大三种尺寸的纸片，适应不同场景
  • 带图标纸片：结合图标和文本的纸片，提供更直观的视觉提示

这种变体设计展示了组件的扩展性，通过不同的 props 组合可以实现多样化的视觉效果。

状态管理

对于不同类型的纸片，采用了不同的状态管理策略：

  • 基础纸片使用索引数组管理选中状态
  • 彩色纸片使用颜色值数组管理选中状态

这种灵活性使得组件可以适应不同的数据结构和使用场景。

  1. 组件映射：

    • SafeAreaView → SafeArea 或 Flex 容器
    • ScrollView → Scroll 组件
    • TouchableOpacity → Button 或 Text + 手势事件
    • View → Flex 容器
    • Text → Text 组件

  2. 样式适配：

    • 鸿蒙系统的样式定义方式与 React Native 类似，但属性名称可能略有不同
    • 例如，borderRadius 在鸿蒙中可能需要使用 border-radius 或其他等效属性
    • 尺寸单位在鸿蒙中默认使用 vp，与 React Native 的密度无关像素概念类似

  3. 布局适配：

    • 鸿蒙系统的布局系统基于 Flexbox，与 React Native 兼容
    • 流式布局的实现逻辑可以直接复用，但需要注意获取屏幕尺寸的 API 差异
    • React Native 中使用 Dimensions.get('window')，鸿蒙中可以使用 getWindowSize() 或类似 API

  4. 状态管理适配：

    • React Native 中使用 useState Hook 管理状态
    • 鸿蒙系统中可以使用 @State 装饰器实现类似的状态管理
    • 对于复杂状态，可以使用鸿蒙的 AppStorage 或 LocalStorage

  1. 类型定义优化：

    • 当前代码使用了 TypeScript 类型定义，但可以进一步完善：
    interface ChipProps {
  label: string;
  selected: boolean;
  onPress: () => void;
  color?: string;
}

const Chip: React.FC<ChipProps> = ({ label, selected, onPress, color = '#3B82F6' }) => {
  // 实现...
};

  2. 组件复用优化：

    • 考虑使用 React.memo 包裹 Chip 组件，减少不必要的重渲染：
    const Chip: React.FC<ChipProps> = React.memo(({ label, selected, onPress, color = '#3B82F6' }) => {
  // 实现...
});

  3. 状态管理优化：

    • 对于大量纸片的场景，考虑使用 useCallback 缓存事件处理函数：
    const toggleChip = useCallback((index: number) => {
  setSelectedChips(prev => 
    prev.includes(index) 
      ? prev.filter(i => i !== index) 
      : [...prev, index]
  );
}, []);

  4. 可访问性优化：

    • 添加 accessibilityLabel 属性，提高应用的可访问性：
    <TouchableOpacity 
  style={[styles.chip, selected && { backgroundColor: color, borderColor: color }]} 
  onPress={onPress}
  accessibilityLabel={`${selected ? '选中' : '未选中'}: ${label}`}
>
  {/* 内容 */}
</TouchableOpacity>

  5. 样式优化：

    • 考虑使用主题系统管理颜色，提高样式的一致性和可维护性：
    // theme.ts
export const theme = {
  colors: {
    primary: '#3B82F6',
    secondary: '#64748B',
    background: '#f8f9fa',
    // 更多颜色...
  },
  // 更多主题配置...
};

在将此组件迁移到鸿蒙系统时，需要注意以下几点：

  1. 组件转换：

    • 使用鸿蒙 ArkUI 框架的组件体系，将 React Native 组件映射为对应的 ArkUI 组件
    • 保持组件树结构和逻辑不变，只替换具体的组件实现

  2. 状态管理：

    • 鸿蒙系统中可以使用 @State、@Prop 等装饰器实现类似的状态管理
    • 对于跨组件通信，可以使用事件总线或全局状态管理方案

  3. 样式系统：

    • 鸿蒙的样式定义采用类似 CSS 的语法，但需要适应其特有的属性和单位
    • 可以创建样式工具函数，统一处理 React Native 和鸿蒙的样式差异

  4. 事件处理：

    • 鸿蒙系统的事件处理机制与 React Native 类似，但语法可能不同
    • 例如，React Native 中使用 onPress，鸿蒙中可能使用 onClick 或其他等效属性

  5. 布局系统：

    • 鸿蒙系统的布局系统基于 Flexbox，与 React Native 兼容
    • 流式布局的实现逻辑可以直接复用，但需要注意获取屏幕尺寸的 API 差异

这个纸片组件演示应用展示了 React Native 跨端开发的核心技术要点，通过高度可复用的组件设计、灵活的状态管理和细致的样式系统，实现了一个功能丰富、视觉美观的纸片组件。在鸿蒙系统适配方面，通过组件映射、样式适配和布局调整，可以快速实现跨端迁移，保持功能和视觉效果的一致性。

在React Native跨端开发体系中，通用原子组件封装是工程化开发的核心基础，而纸片（Chip）作为移动端高频使用的标签式交互组件，其封装的灵活性、可复用性与跨端兼容性直接影响多端应用的开发效率与视觉体验。本次解析的代码实现了一套高度可定制的通用Chip组件，同时基于该组件拓展了基础版、彩色版、多尺寸版、带图标版等多形态展示，核心实现均基于React Native原生API与TypeScript强类型约束，无第三方依赖，可无缝适配React Native for HarmonyOS鸿蒙桥接方案，实现Android、iOS、鸿蒙多端的原生渲染与交互一致性。本文将从通用Chip组件的封装设计、状态驱动的多选逻辑、跨端布局适配、样式系统定制化、鸿蒙跨端兼容核心要点等维度，深度解读该组件的技术实现思路，剖析其在跨端应用开发中的工程化价值。

一、技术栈

本实现延续React Native + TypeScript的核心技术栈，以函数式组件为基础，结合useState实现多选状态管理，完成通用Chip组件的原子化封装，所有技术选型均围绕鸿蒙跨端兼容、组件高可定制性、原生渲染性能、类型安全四大核心原则展开，核心选型与技术特性如下：

  • 基础原生组件：选用SafeAreaView、View、Text、TouchableOpacity作为核心载体，均为React Native for HarmonyOS已完成深度桥接的基础组件，底层会被编译为各平台原生组件（鸿蒙的Component、Android的View、iOS的UIView），基于原生渲染引擎执行，规避WebView渲染的性能损耗与样式兼容问题，保证多端原生交互体验；
  • 滚动与适配组件：ScrollView承担多形态Chip展示的滚动容器职责，桥接各平台原生滚动控件，适配鸿蒙大屏设备（平板、折叠屏）的内容展示，DimensionsAPI获取设备窗口宽度，为后续响应式布局拓展提供基础，二者均为跨端屏幕适配的标准能力；
  • React核心能力：useState实现Chip组件的多选状态管理，遵循React声明式编程与状态驱动渲染核心思想，该思想与鸿蒙ArkUI的@State/@ArrState装饰器状态管理理念高度统一，为跨端业务逻辑一致性提供基础；
  • TypeScript强类型约束：为Chip组件Props、状态变量添加完整的类型定义，明确参数类型、可选性、默认值，同时实现泛型状态的精准管理，规避跨端开发中的类型错误，提升代码的可维护性与团队协作效率；
  • 原子化组件封装：将Chip封装为独立的原子组件，通过Props暴露定制化入口（标签文本、选中状态、点击事件、主题色），实现视图与逻辑的解耦，符合React组件化开发规范，同时与鸿蒙ArkUI的自定义原子组件开发思路一致，便于跨端复用与迭代；
  • 轻量资源管理：以键值对形式封装ICONS全局图标库，选用系统原生支持的Emoji作为视觉元素，避免第三方图标库在鸿蒙平台的桥接兼容问题，减少项目依赖体积，提升多端编译与启动效率。

本实现的技术选型既满足了Chip组件多形态展示的业务需求，又保证了组件的通用性与可拓展性，可直接复用至电商、资讯、待办、社交等各类跨端应用的标签选择、分类筛选等场景，是React Native鸿蒙跨端开发中原子组件封装的典型实践。

二、原子化组件

将Chip标签封装为独立的原子组件，是本实现最核心的工程化设计亮点，该组件遵循单一职责原则与开闭原则——仅负责自身的视图渲染与点击事件透传，同时通过Props开放足够的定制化入口，支持主题色、选中状态、标签文本的灵活配置，其封装思路充分体现了React Native跨端开发的组件化理念，核心技术实现要点如下：

1. TypeScript强类型

Chip组件通过React.FC<{ label: string, selected: boolean, onPress: () => void, color?: string }>为Props添加了完整的类型约束，明确了参数的必选性、类型与可选性：

  • 必选参数：label（标签文本，字符串类型）、selected（选中状态，布尔类型）、onPress（点击回调函数，无参无返回值），保证组件的基础功能可用；
  • 可选参数：color（主题色，字符串类型），并通过color = '#3B82F6'为其设置默认值（蓝色系主色调），兼顾组件的通用性与定制性。

同时，为可选参数设置默认值的实现方式，遵循了最小配置原则——用户无需传递color即可使用组件的默认样式，需要定制主题色时再传递该参数，提升了组件的使用便捷性。在鸿蒙跨端开发中，该TypeScript类型约束可直接复用至鸿蒙ArkUI的自定义组件，仅需将React的Props类型转换为ArkUI的@Prop/@Optional/@State装饰器类型，即可实现鸿蒙端的类型安全，保证多端组件开发的类型一致性。

2. Props透传

Chip组件内部无任何硬编码的内容、样式与状态，所有视图展示的内容（label）、状态（selected）、行为（onPress）、样式（color）均通过Props从外部透传而来，实现了组件与业务逻辑的完全解耦。例如，标签的“科技”“体育”文本由父组件ChipDemo通过label传递，选中状态由父组件的状态变量通过selected传递，点击事件由父组件定义的回调逻辑通过onPress传递，主题色由父组件通过color传递（未传递时使用默认值）。

这种解耦设计在跨端开发中具有极高的工程价值：

  • 跨场景复用：可直接将Chip组件复用至不同业务场景，仅需传递不同的Props参数，即可实现不同的展示效果与交互逻辑，例如资讯分类筛选、待办标签管理、商品属性选择等；
  • 跨平台定制：当需要针对鸿蒙平台定制Chip组件的默认主题色时，仅需修改组件的color默认值，无需修改组件内部的渲染逻辑；当需要定制鸿蒙大屏设备的Chip样式时，仅需通过PlatformAPI在样式中做条件判断，无需影响组件的核心逻辑；
  • 易维护性：组件的逻辑与视图高度内聚，当需要优化Chip的基础样式（如圆角、内边距）时，仅需修改组件内部的样式定义，所有使用该组件的地方会自动同步更新，大幅降低跨端开发的维护成本。

3. 条件样式

Chip组件通过默认样式+条件样式+动态内联样式的结合，实现了选中/未选中状态的样式动态切换，核心代码如下：

style={[
  styles.chip,
  selected && { 
    backgroundColor: color,
    borderColor: color
  }
]}

<Text style={[
  styles.chipText,
  selected && { color: '#ffffff' }
]}>
  {label}
</Text>

这种实现方式将静态基础样式（styles.chip、styles.chipText）与动态条件样式（选中时的背景色、边框色、文字色）分离，静态样式通过StyleSheet.create()预编译优化，动态样式通过内联样式实现，兼顾了渲染性能与样式灵活性。

该实现方式无任何平台专属API，完全基于JavaScript的逻辑判断与React Native的样式拼接规范，在鸿蒙平台中，React Native for HarmonyOS会将样式数组的拼接逻辑与内联样式完整桥接，自动合并静态样式与动态样式，实现与Android、iOS完全一致的样式切换效果。与鸿蒙ArkUI的if/else条件样式、@State驱动样式变化相比，二者的设计思想高度统一，均是通过状态控制样式的动态切换，保证了跨端样式开发的逻辑一致性。

三、状态驱动的多选逻辑

本实现基于React的useState钩子实现了两种不同维度的Chip多选状态管理——基于索引的基础Chip多选、基于颜色值的彩色Chip多选，同时通过TypeScript泛型实现了状态变量的精准类型约束，其状态管理逻辑完全基于React的单向数据流原则，无任何平台专属特性，可在鸿蒙平台无缝兼容，核心实现要点如下：

1. 泛型状态

通过TypeScript泛型为useState状态变量添加精准的类型约束，实现了不同类型数据的状态管理：

  • 基础Chip的选中状态：const [selectedChips, setSelectedChips] = useState<number[]>([])，明确状态为数字数组，存储选中Chip的索引值，初始值为空数组，表示默认无选中；
  • 彩色Chip的选中状态：const [selectedColorChips, setSelectedColorChips] = useState<string[]>([])，明确状态为字符串数组，存储选中Chip的主题色值，初始值为空数组，保证默认状态的一致性。

这种泛型状态的初始化方式，与鸿蒙ArkUI的强类型状态管理（如@State selectedChips: number[] = []）高度一致，无论是React Native还是鸿蒙ArkUI，均通过强类型约束保证状态数据的类型准确性，规避了跨端开发中因类型隐式转换导致的逻辑错误。同时，空数组的初始值设置，保证了多端组件初始渲染时的状态一致性，避免了默认选中的异常情况。

2. 无状态修改

定义toggleChip与toggleColorChip两个回调函数，实现Chip选中/取消选中的状态切换，核心逻辑遵循React状态不可变的核心原则——不直接修改原状态数组，而是通过数组过滤与扩展运算符生成新的数组作为新状态：

  • 取消选中：通过filter方法过滤掉当前选中的索引/颜色值，返回新的数组；
  • 选中：通过扩展运算符[...selectedChips, index]复制原数组并添加新的选中项，返回新的数组。

这种状态更新方式的优势在于，能让React Native框架精准识别状态的变化，触发组件的重渲染，同时该逻辑完全基于ES6通用数组方法，在鸿蒙、Android、iOS的JS引擎中均能正常执行，无跨端兼容问题。在鸿蒙平台中，React Native for HarmonyOS会将该状态更新逻辑完整桥接，保证鸿蒙端的状态更新与视图重渲染和其他平台完全一致。

与鸿蒙ArkUI的状态更新逻辑相比，二者均遵循不可变数据原则，鸿蒙ArkUI中修改数组状态时，同样需要通过Array.prototype.filter、Array.prototype.concat等方法生成新数组，而非直接修改原数组，这一设计思想的统一，让跨端开发的状态管理逻辑无需做差异化调整，大幅提升了开发效率。

3. 状态与组件

将状态变量与Chip组件的selected属性绑定，通过selectedChips.includes(index)、selectedColorChips.includes(color)判断当前Chip是否被选中，实现状态与视图的联动。当状态更新后，React Native框架会自动触发ChipDemo组件的重渲染，所有Chip组件的selected属性会根据新的状态重新计算，实现选中样式的动态切换。

这一状态驱动视图的绑定逻辑，在鸿蒙平台中同样适用，鸿蒙ArkUI通过@State与组件属性的绑定实现视图联动，二者的设计思想高度统一，保证了跨端渲染逻辑的一致性。后续拓展Chip的单选逻辑时，仅需修改状态更新方式（将数组改为单个值），即可实现多端一致的单选效果，改造成本极低。

真实演示案例代码：



// app.tsx
import React, { useState } from 'react';
import { SafeAreaView, View, Text, StyleSheet, TouchableOpacity, ScrollView, Dimensions } from 'react-native';

// 图标库
const ICONS = {
  add: '➕',
  check: '✅',
  delete: '🗑️',
  edit: '✏️',
  tag: '🏷️',
  category: '📚',
  close: '✕',
  star: '⭐',
  heart: '❤️',
  like: '👍',
  comment: '💬',
  share: '📤',
};

const { width } = Dimensions.get('window');

const Chip: React.FC<{ 
  label: string, 
  selected: boolean, 
  onPress: () => void,
  color?: string
}> = ({ label, selected, onPress, color = '#3B82F6' }) => {
  return (
    <TouchableOpacity 
      style={[
        styles.chip,
        selected && { 
          backgroundColor: color,
          borderColor: color
        }
      ]}
      onPress={onPress}
    >
      <Text style={[
        styles.chipText,
        selected && { color: '#ffffff' }
      ]}>
        {label}
      </Text>
    </TouchableOpacity>
  );
};

const ChipDemo: React.FC = () => {
  const [selectedChips, setSelectedChips] = useState<number[]>([]);
  const [selectedColorChips, setSelectedColorChips] = useState<string[]>([]);

  const toggleChip = (index: number) => {
    if (selectedChips.includes(index)) {
      setSelectedChips(selectedChips.filter(i => i !== index));
    } else {
      setSelectedChips([...selectedChips, index]);
    }
  };

  const toggleColorChip = (color: string) => {
    if (selectedColorChips.includes(color)) {
      setSelectedColorChips(selectedColorChips.filter(c => c !== color));
    } else {
      setSelectedColorChips([...selectedColorChips, color]);
    }
  };

  const categories = ['全部', '科技', '体育', '娱乐', '财经', '健康'];
  const colors = ['#3B82F6', '#EF4444', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899'];

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>纸片组件</Text>
        <Text style={styles.subtitle}>选择不同类型的标签</Text>
      </View>

      <ScrollView contentContainerStyle={styles.content}>
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>基础纸片</Text>
          <View style={styles.chipRow}>
            {categories.map((category, index) => (
              <Chip
                key={index}
                label={category}
                selected={selectedChips.includes(index)}
                onPress={() => toggleChip(index)}
              />
            ))}
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>彩色纸片</Text>
          <View style={styles.chipRow}>
            {colors.map((color, index) => (
              <Chip
                key={index}
                label={`颜色${index + 1}`}
                selected={selectedColorChips.includes(color)}
                onPress={() => toggleColorChip(color)}
                color={color}
              />
            ))}
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>尺寸变化</Text>
          <View style={styles.chipRow}>
            <TouchableOpacity style={[styles.chip, styles.smallChip]}>
              <Text style={[styles.chipText, styles.smallText]}>小纸片</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.chip}>
              <Text style={styles.chipText}>普通纸片</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[styles.chip, styles.largeChip]}>
              <Text style={[styles.chipText, styles.largeText]}>大纸片</Text>
            </TouchableOpacity>
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>带图标的纸片</Text>
          <View style={styles.chipRow}>
            <TouchableOpacity style={styles.chip}>
              <Text style={styles.chipIcon}>{ICONS.star}</Text>
              <Text style={styles.chipText}>收藏</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.chip}>
              <Text style={styles.chipIcon}>{ICONS.heart}</Text>
              <Text style={styles.chipText}>喜欢</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.chip}>
              <Text style={styles.chipIcon}>{ICONS.comment}</Text>
              <Text style={styles.chipText}>评论</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
  },
  header: {
    paddingTop: 40,
    paddingBottom: 20,
    paddingHorizontal: 20,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#e9ecef',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
    marginTop: 8,
  },
  content: {
    padding: 16,
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 12,
  },
  chipRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
  },
  chip: {
    backgroundColor: '#ffffff',
    borderColor: '#cbd5e1',
    borderWidth: 1,
    borderRadius: 20,
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginRight: 8,
    marginBottom: 8,
    flexDirection: 'row',
    alignItems: 'center',
  },
  smallChip: {
    paddingHorizontal: 12,
    paddingVertical: 6,
  },
  largeChip: {
    paddingHorizontal: 20,
    paddingVertical: 10,
  },
  chipText: {
    fontSize: 14,
    color: '#475569',
  },
  smallText: {
    fontSize: 12,
  },
  largeText: {
    fontSize: 16,
  },
  chipIcon: {
    marginRight: 4,
    fontSize: 14,
  },
});

export default ChipDemo;

请添加图片描述

打包

接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

在这里插入图片描述

打包之后再将打包后的鸿蒙OpenHarmony文件拷贝到鸿蒙的DevEco-Studio工程目录去：

在这里插入图片描述

最后运行效果图如下显示：

请添加图片描述
本文介绍了一个高度模块化的纸片组件(Chip)设计，采用React Native实现，具有以下特点：1)核心Chip组件通过props参数化，支持标签文本、选中状态和颜色自定义；2)使用useState管理选中状态，实现多选逻辑；3)采用flex布局实现自动换行的流式排列；4)展示基础、彩色、尺寸变体和带图标四种纸片变体。文章还探讨了组件向鸿蒙系统迁移的方案，包括组件映射、状态管理和样式适配等关键技术点，并提出了类型定义优化、性能优化等改进建议。

# harmonyos # react.js
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

第一次全量编译与打包—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】

avatar 开源鸿蒙跨平台开发者社区

Flutter 鸿蒙化实战：flutter_wakelock 适配 OpenHarmony，四行代码让屏幕常亮

随着鸿蒙生态的快速发展，越来越多的 Flutter 应用需要适配 OpenHarmony 平台。但生态早期，大量常用三方库只有 Android / iOS 实现，鸿蒙侧只能自己造轮子。为了解决这个问题，对一批高频使用的 Flutter 三方库做了 OpenHarmony 平台适配，统一托管在 GitCode 的下，全部通过 TAG 版本隔离、配套门禁编译验证，开箱即用。本篇是系列文章之一，主角是—

avatar 开源鸿蒙跨平台开发者社区
cover

RN 环境搭建、版本兼容问题

avatar 开源鸿蒙跨平台开发者社区