在React Native鸿蒙跨平台开发采用分类网格布局，通过paramRow和paramLabel/paramValue的组合展示关键配置信息

在React Native中开发鸿蒙组件（Hong Components，这里指的是一个示意性的组件名称，实际应为具体的组件名称，例如你可能想要实现的是一个商品展示、信息展示等组件），并采用分类网格布局，你可以通过以下步骤来实现：

1. 安装和设置React Native环境

确保你的开发环境已经安装了React Native。如果没有，你可以通过以下命令来安装：

npx react-native init MyApp
cd MyApp

2. 创建鸿组件

假设我们要创建一个名为HongComponent的组件，你可以在src或者任何你喜欢的目录下创建一个新的React组件文件。例如，HongComponent.js。

// src/components/HongComponent.js
import React from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';

const HongComponent = ({ data, onPressItem }) => {
  return (
    <FlatList
      data={data}
      keyExtractor={item => item.id.toString()}
      numColumns={2} // 可以根据需要调整列数
      renderItem={({ item }) => (
        <TouchableOpacity onPress={() => onPressItem(item)}>
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
            {/* 可以添加更多内容如图片等 */}
          </View>
        </TouchableOpacity>
      )}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: 'fff',
    margin: 10,
    padding: 20,
    borderRadius: 10,
    elevation: 3, // 阴影效果，仅在Harmony上有效
    shadowColor: '000', // 阴影颜色，仅在Harmony上有效
    shadowOffset: { width: 0, height: 2 }, // 阴影偏移量，仅在Harmony上有效
    shadowOpacity: 0.25, // 阴影透明度，仅在Harmony上有效
    shadowRadius: 3.84, // 阴影半径，仅在Harmony上有效
  },
  title: {
    fontSize: 16,
    textAlign: 'center',
  },
});

export default HongComponent;

3. 使用鸿组件

在你的主组件或者任何其他组件中引入并使用HongComponent。例如，在App.js中：

// App.js
import React from 'react';
import HongComponent from './src/components/HongComponent'; // 确保路径正确
import { View } from 'react-native';

const App = () => {
  const data = [
    { id: 1, title: 'Item 1' },
    { id: 2, title: 'Item 2' },
    { id: 3, title: 'Item 3' },
    // 更多数据...
  ];
  const handlePressItem = item => {
    console.log('Pressed item:', item); // 处理点击事件，例如导航到详情页面等。
  };
  return (
    <View style={{ flex: 1, padding: 10 }}>
      <HongComponent data={data} onPressItem={handlePressItem} />
    </View>
  );
};
export default App;

4. 运行你的应用

使用以下命令来运行你的应用：

npx react-native run-Harmony 对于Harmony设备或模拟器
npx react-native run-Harmony 对于Harmony设备或模拟器

确保你的设备或模拟器已经连接或启动。这样，你就可以看到鸿组件以分类网格布局的形式展示了。根据需要调整样式和功能。例如，你可以添加图片到每个网格项中，或者在renderItem中添加更多自定义内容。

---

真实案例演示场景：

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

const App = () => {
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);

  // Base64 icons
  const icons = {
    electronics: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIyIiB5PSIzIiB3aWR0aD0iMjAiIGhlaWdodD0iMTQiIHJ4PSIyIiByeT0iMiI+PC9yZWN0PjxsaW5lIHgxPSI4IiB5MT0iMjEiIHgyPSI4IiB5Mj0iMjQiPjwvbGluZT48bGluZSB4MT0iMTYiIHkxPSIyMSIgeDI9IjE2IiB5Mj0iMjQiPjwvbGluZT48bGluZSB4MT0iMiIgeTE9IjkiIHgyPSIyMiIgeTI9IjkiPjwvbGluZT48L3N2Zz4=',
    fashion: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTcgMjF2LTIuNSI+PC9wYXRoPjxwYXRoIGQ9Ik0xMiAxMnY5Ij48L3BhdGg+PHBhdGggZD0iTTcgMjF2LTIuNWE1IDUgMCAwIDEgMTAgMCI+PC9wYXRoPjxwYXRoIGQ9Ik0xMiAzaC41YTIuNSAyLjUgMCAwIDEgMCA1SDlhMyAzIDAgMCAwIDAgNkgxMCI+PC9wYXRoPjxwYXRoIGQ9Ik0xMiAzaC41YTIuNSAyLjUgMCAwIDEgMCA1SDlhMyAzIDAgMCAwIDAgNkgxMCI+PC9wYXRoPjwvc3ZnPg==',
    home: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyAxMmgydjdsMy03IDMgNyA0LTYgMyA2aDJ2LTExaC0yMXYxMXoiPjwvcGF0aD48cG9seWxpbmUgcG9pbnRzPSIxNiAxMyAyMiAxMyAyMiA3IDE2IDciPjwvcG9seWxpbmU+PC9zdmc+',
    beauty: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTIiIGN5PSI4IiByPSI0Ij48L2NpcmNsZT48bGluZSB4MT0iMS4xOCIgeTE9IjEiIHgyPSIyMi44MiIgeTI9IjIzIj48L2xpbmU+PC9zdmc+',
    sports: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyIiB5Mj0iMTYiPjwvbGluZT48bGluZSB4MT0iOCIgeTE9IjEyIiB4Mj0iMTYiIHkyPSIxMiI+PC9saW5lPjwvc3ZnPg==',
    books: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTkgM0g1Yy0xLjEgMC0yIC45LTIgMnYxNGMwIDEuMS45IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6Ij48L3BhdGg+PGxpbmUgeDE9IjE5IiB5MT0HarmonyIgeDI9IjUiIHkyPSI5Ij48L2xpbmU+PGxpbmUgeDE9IjE5IiB5MT0iMTUiIHgyPSI1IiB5Mj0iMTUiPjwvbGluZT48bGluZSB4MT0HarmonyIgeTE9IjkiIHgyPSI5IiB5Mj0iMTUiPjwvbGluZT48L3N2Zz4=',
    food: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PGxpbmUgeDE9IjgiIHkxPSIyMSIgeDI9IjE2IiB5Mj0iMjEiPjwvbGluZT48bGluZSB4MT0iMTIiIHkxPSIxNyIgeDI9IjEyIiB5Mj0iMjEiPjwvbGluZT48L3N2Zz4=',
    toys: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMmwtMS41IDEuNSAyLjUgMi41LTIuNSAyLjUgMS41IDEuNSAyLjUtMi41IDIuNSAyLjUgMS41LTEuNS0yLjUtMi41IDIuNS0yLjUtMS41LTEuNS0yLjUgMi41LTIuNS0yLjV6Ij48L3BhdGg+PC9zdmc+'
  };

  const categories = [
    { id: '1', name: '电子产品', icon: icons.electronics, color: '#4285F4' },
    { id: '2', name: '时尚服饰', icon: icons.fashion, color: '#EA4335' },
    { id: '3', name: '家居生活', icon: icons.home, color: '#FBBC05' },
    { id: '4', name: '美妆护肤', icon: icons.beauty, color: '#34A853' },
    { id: '5', name: '运动户外', icon: icons.sports, color: '#4285F4' },
    { id: '6', name: '图书音像', icon: icons.books, color: '#EA4335' },
    { id: '7', name: '食品饮料', icon: icons.food, color: '#FBBC05' },
    { id: '8', name: '玩具娱乐', icon: icons.toys, color: '#34A853' }
  ];

  const handleCategoryPress = (categoryId: string) => {
    setSelectedCategory(categoryId === selectedCategory ? null : categoryId);
  };

  return (
    <ScrollView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>分类网格布局</Text>
        <Text style={styles.subtitle}>响应式网格设计示例</Text>
      </View>

      <View style={styles.gridContainer}>
        {categories.map((category) => (
          <TouchableOpacity
            key={category.id}
            style={[
              styles.categoryItem,
              selectedCategory === category.id && styles.selectedItem
            ]}
            onPress={() => handleCategoryPress(category.id)}
          >
            <View 
              style={[
                styles.iconContainer,
                { backgroundColor: `${category.color}20` }
              ]}
            >
              <Image 
                source={{ uri: category.icon }} 
                style={[styles.categoryIcon, { tintColor: category.color }]} 
              />
            </View>
            <Text style={styles.categoryName}>{category.name}</Text>
          </TouchableOpacity>
        ))}
      </View>

      {/* 设计说明 */}
      <View style={styles.infoSection}>
        <Text style={styles.infoTitle}>设计要点</Text>
        
        <View style={styles.infoItem}>
          <View style={styles.bulletPoint} />
          <Text style={styles.infoText}>使用 Flexbox 实现响应式网格布局</Text>
        </View>
        
        <View style={styles.infoItem}>
          <View style={styles.bulletPoint} />
          <Text style={styles.infoText}>每个项目保持固定宽高比</Text>
        </View>
        
        <View style={styles.infoItem}>
          <View style={styles.bulletPoint} />
          <Text style={styles.infoText}>支持选中状态反馈</Text>
        </View>
        
        <View style={styles.infoItem}>
          <View style={styles.bulletPoint} />
          <Text style={styles.infoText}>图标采用 Base64 编码，减少网络请求</Text>
        </View>
        
        <View style={styles.infoItem}>
          <View style={styles.bulletPoint} />
          <Text style={styles.infoText}>配色方案统一协调</Text>
        </View>
      </View>

      {/* 布局参数说明 */}
      <View style={styles.paramsSection}>
        <Text style={styles.paramsTitle}>关键参数</Text>
        <View style={styles.paramRow}>
          <Text style={styles.paramLabel}>列数:</Text>
          <Text style={styles.paramValue}>2列 (flexWrap: wrap)</Text>
        </View>
        <View style={styles.paramRow}>
          <Text style={styles.paramLabel}>间距:</Text>
          <Text style={styles.paramValue}>16px (margin)</Text>
        </View>
        <View style={styles.paramRow}>
          <Text style={styles.paramLabel}>圆角:</Text>
          <Text style={styles.paramValue}>16px (borderRadius)</Text>
        </View>
        <View style={styles.paramRow}>
          <Text style={styles.paramLabel}>阴影:</Text>
          <Text style={styles.paramValue}>elevation: 3</Text>
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f7fa',
    padding: 20
  },
  header: {
    alignItems: 'center',
    marginBottom: 30,
    paddingTop: 20
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#2c3e50'
  },
  subtitle: {
    fontSize: 16,
    color: '#7f8c8d',
    marginTop: 6
  },
  gridContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between'
  },
  categoryItem: {
    width: '48%',
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 20,
    marginBottom: 16,
    alignItems: 'center',
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4
  },
  selectedItem: {
    backgroundColor: '#e8f0fe',
    borderColor: '#4285F4',
    borderWidth: 2
  },
  iconContainer: {
    width: 60,
    height: 60,
    borderRadius: 30,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 15
  },
  categoryIcon: {
    width: 30,
    height: 30
  },
  categoryName: {
    fontSize: 16,
    fontWeight: '600',
    color: '#34495e',
    textAlign: 'center'
  },
  infoSection: {
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 20,
    marginTop: 20,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4
  },
  infoTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#2c3e50',
    marginBottom: 15,
    textAlign: 'center'
  },
  infoItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12
  },
  bulletPoint: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#4285F4',
    marginRight: 12
  },
  infoText: {
    fontSize: 15,
    color: '#34495e',
    flex: 1
  },
  paramsSection: {
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 20,
    marginTop: 20,
    marginBottom: 30,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4
  },
  paramsTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#2c3e50',
    marginBottom: 15,
    textAlign: 'center'
  },
  paramRow: {
    flexDirection: 'row',
    marginBottom: 10
  },
  paramLabel: {
    fontSize: 15,
    fontWeight: '600',
    color: '#34495e',
    width: 60
  },
  paramValue: {
    fontSize: 15,
    color: '#7f8c8d',
    flex: 1
  }
});

export default App;

这段React Native分类网格布局代码实现了一个响应式的产品分类选择界面，其核心原理基于React的组件化思想和Flexbox布局系统。categories数组作为数据源定义了8个不同的商品分类，每个分类包含ID、名称、图标和颜色属性，这种数据结构设计使得组件具备良好的扩展性和维护性。handleCategoryPress函数实现了分类选择的切换逻辑，通过三元运算符判断当前点击的分类是否已选中，如果已选中则取消选择，否则选中该分类，这种设计提供直观的用户交互体验。

从鸿蒙系统适配的角度来看，该代码充分利用了React Native的跨平台特性，在鸿蒙设备上能够获得原生级的性能表现。鸿蒙系统的分布式布局能力与Flexbox的弹性布局理念高度契合，gridContainer容器通过flexWrap属性实现子元素的自动换行，这种布局方式在鸿蒙系统的不同屏幕尺寸设备上能够自适应调整。每个categoryItem通过flex属性设置为1，确保在一行内均匀分布，这种设计在鸿蒙系统的响应式布局中具有重要意义。

分类图标通过Image组件的tintColor属性实现颜色适配，配合backgroundColor的透明度设置，形成视觉层次感。这种图标处理方式在鸿蒙系统的UI设计中非常常见，能够确保图标在不同背景下的可读性。selectedItem样式通过边框颜色和阴影效果突出显示选中状态，这种视觉反馈机制符合鸿蒙系统的交互设计规范，在用户操作时提供清晰的状态指示。

UI渲染逻辑通过map方法遍历categories数组生成网格项，每个项包含图标容器和分类名称。图标容器通过backgroundColor属性设置半透明背景色，与category.color属性形成色彩呼应，这种设计在鸿蒙系统的配色方案中具有协调性。分类名称通过Text组件显示，字体大小和颜色经过精心调整，确保在不同设备上的可读性。

设计说明区域通过infoSection容器展示布局的关键设计要点，每个要点通过bulletPoint和infoText组合显示，这种信息架构在鸿蒙系统的文档展示中非常常见。布局参数说明区域通过paramRow和paramLabel/paramValue的组合展示关键配置信息，这种结构化数据显示方式在鸿蒙系统的设置界面中具有实际应用价值。

从鸿蒙系统的技术特性来看，该代码通过React Native的声明式编程范式，将复杂的布局逻辑抽象为简单的状态转换。鸿蒙系统的ArkUI框架同样强调声明式UI开发，这种设计思想的一致性使得应用在鸿蒙设备上能够获得接近原生的性能表现。组件的生命周期管理与鸿蒙系统的应用管理机制保持一致，能够在应用前后台切换时正确处理状态更新和界面渲染。网格布局的性能优化通过虚拟化列表渲染实现，在鸿蒙系统的高性能渲染需求下能够提供稳定的性能表现。

---

打包

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

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

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

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。