React Native鸿蒙开发实战（二）：基础组件与Flex布局

一、核心基础组件解析

在鸿蒙平台上进行React Native开发时，开发者可以使用一系列与Web前端相似的基础UI组件。这些组件构成了界面构建的基石，便于快速搭建用户界面。

1.1 View 组件 —— 界面布局容器

View 是 React Native 中最基础的容器型组件，功能类似于 HTML 中的 div 标签。它支持 Flexbox 布局模式，可用于包裹其他子组件，并通过样式属性控制布局行为。

import { View, Text } from 'react-native';
const MyView = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Hello, World!</Text>
  </View>
);
  

关键属性说明：

• flex

  ：设置组件在其父容器中的弹性伸缩比例

• justifyContent

  ：定义主轴方向上的对齐方式，如 flex-start、center、flex-end、space-between 和 space-around

• alignItems

  ：设定交叉轴方向的对齐策略

• backgroundColor

  ：用于指定该视图的背景颜色

1.2 Text 组件 —— 文本内容展示

Text 组件专门用于渲染文本信息，具备嵌套能力和丰富的样式定制选项。

import { Text } from 'react-native';
const MyText = () => (
  <Text style={{ fontSize: 16, color: '#333', fontWeight: 'bold' }}>
    Welcome to React Native!
  </Text>
);
  

常用样式属性包括：

• fontSize

  ：控制字体大小

• color

  ：设置文字显示的颜色

• fontWeight

  ：调整字重，例如 bold 或 normal

• textAlign

  ：定义文本的水平对齐方式

1.3 Image 组件 —— 图像资源呈现

Image 组件负责加载和展示图像内容，兼容本地文件及网络链接形式的图片资源，支持多种常见格式。

import { Image } from 'react-native';

// 显示本地图片
<Image source={require('./images/icon.png')} style={{ width: 100, height: 100 }} />

// 加载网络图片
<Image source={{ uri: 'https://example.com/image.png' }} style={{ width: 200, height: 200 }} />
  

重要属性说明：

• source

  ：指定图片的数据源路径或URL地址

• resizeMode

  ：配置图片的缩放适配模式，如 cover、contain、stretch 等

• onLoad

  ：当图片成功加载完成后触发的回调函数

二、Flex 布局在鸿蒙平台的应用与适配

2.1 Flex 布局基本原理

React Native 采用 Flexbox 模型实现界面排布，虽然其设计思想源自 CSS 的 Flexbox，但在具体实现上存在差异。尤其在鸿蒙系统中，布局的默认表现与 Android 或 iOS 平台有所不同。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // 主轴方向：row(水平)或column(垂直)
    justifyContent: 'space-between', // 主轴对齐
    alignItems: 'center', // 交叉轴对齐
    padding: 16,
  },
});

鸿蒙平台特有差异点：

• 默认的主轴方向为

  flexDirection

  ，即

  column

  ，表现为垂直堆叠排列
• 百分比宽度写法（

  width: '50%'

  ）在较旧版本的鸿蒙系统中可能无法正常解析

• justifyContent: 'space-between'

  在部分设备或场景下需额外处理以确保正确渲染

2.2 典型布局模式示例

水平垂直居中布局：

<View style={{
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center'
}}>
  <Text>居中内容</Text>
</View>
  

等分布局（三列均分）：

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
  <View style={{ width: '30%', height: 50, backgroundColor: 'red' }} />
  <View style={{ width: '30%', height: 50, backgroundColor: 'green' }} />
  <View style={{ width: '30%', height: 50, backgroundColor: 'blue' }} />
</View>
  

响应式尺寸布局：

import { Dimensions } from 'react-native';
const { width } = Dimensions.get('window');

<View style={{ width: width * 0.8, height: 200 }}>
  {/* 内容 */}
</View>
  

三、样式体系与单位换算机制

React Native 使用 JavaScript 对象来定义样式，所有尺寸单位均为逻辑像素（dp），不直接依赖物理分辨率。在鸿蒙环境下，需特别注意不同屏幕尺寸下的适配逻辑，合理利用 Dimensions API 获取窗口尺寸并动态计算布局参数，从而实现跨设备一致性体验。

3.1 样式系统：StyleSheet

React Native 中通过 StyleSheet.create 方法创建样式对象，这种方式不仅结构清晰，还能带来性能上的优化。

• 提前校验样式合法性：在开发阶段即可发现样式错误，避免运行时异常
• 支持样式复用：减少冗余代码，提升维护效率
• 缓存机制优化性能：样式对象会被系统缓存，降低重复计算开销

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    padding: 20,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
  },
});

// 使用样式
<View style={styles.container}>
  <Text style={styles.title}>标题</Text>
</View>

3.2 鸿蒙平台的像素单位与换算方法

在鸿蒙环境中，建议优先使用绝对单位（如 px）进行布局，以防止因百分比计算导致的界面错位问题。

import { PixelRatio } from 'react-native';

// 将 dp 转换为物理像素 px
const dp2px = (dp) => PixelRatio.getPixelSizeForLayoutSize(dp);

// 将 px 转回逻辑像素 dp
const px2dp = (px) => PixelRatio.roundToNearestPixel(px);

// 示例：设置固定尺寸视图
<View style={{ width: dp2px(100), height: dp2px(100) }} />

鸿蒙平台常用单位说明

• px

  ：表示物理像素单位

• vp

  ：屏幕密度无关像素，类似于 Android 中的 dp

• fp

  ：字体缩放像素，对应 Android 的 sp 单位

• lpx

  ：视窗级别的逻辑像素单位

布局适配建议

• 利用 Dimensions 获取设备屏幕尺寸信息
• 避免采用百分比方式进行布局，推荐通过绝对单位动态计算尺寸
• 根据不同设备屏幕大小设定响应断点，实现多端适配

Dimensions.get('window')

四、实战示例：新闻卡片组件布局

以下是一个典型的新闻卡片 UI 实现，结合了基础组件和响应式样式设计：

import React from 'react';
import { View, Text, Image, StyleSheet, Dimensions } from 'react-native';

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

const NewsCard = ({ title, summary, imageUrl, date }) => {
  return (
    <View style={styles.card}>
      <Image
        source={{ uri: imageUrl }}
        style={styles.image}
        resizeMode="cover"
      />
      <View style={styles.content}>
        <Text style={styles.title} numberOfLines={2}>{title}</Text>
        <Text style={styles.summary} numberOfLines={3}>{summary}</Text>
        <Text style={styles.date}>{date}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: width - 32,
    backgroundColor: '#fff',
    borderRadius: 8,
    marginBottom: 16,
    marginHorizontal: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  image: {
    width: '100%',
    height: 200,
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
  },
  content: {
    padding: 16,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
    color: '#333',
  },
  summary: {
    fontSize: 14,
    color: '#666',
    lineHeight: 20,
    marginBottom: 12,
  },
  date: {
    fontSize: 12,
    color: '#999',
  },
});

export default NewsCard;

五、总结与关键要点

本章节重点讲解了 React Native 在鸿蒙平台下的组件使用及布局适配策略。

核心知识点

• 基础组件构成：View、Text 和 Image 是构建用户界面的核心元素
• Flex 布局差异处理：鸿蒙对 Flex 的解析存在特殊性，建议使用绝对单位替代百分比布局
• 样式管理最佳方式：通过 StyleSheet.create 创建样式，提高渲染效率并统一管理
• 单位转换注意事项：正确使用 dp/px/sp 等单位，确保跨设备显示一致性

推荐实践

• 实施响应式设计，根据屏幕尺寸动态调整布局
• 针对不同分辨率设备设置适配断点

常见问题规避指南

• 避免在低版本鸿蒙系统中使用不兼容特性

  justifyContent: 'space-between'

• 图片加载过程应结合

  onLoad

  和

  onError

  处理加载状态
• 对于长列表或复杂数据展示，优先选用

  FlatList

  或

  HarmonyList

  组件以保障流畅性

在接下来的章节中，我们会详细探讨状态管理与数据流的相关内容，帮助你掌握在React Native中如何有效处理应用的状态以及实现组件间的数据传递。

flex

ScrollView 的替代方案