接续从零学习RN for OpenHarmony----初识组件（三）继续学习。

        首先先回顾 return() 的整体结构：外层是 SafeAreaView 包裹 ScrollView，ScrollView 内部是 7 个功能模块（包含 1 个标题 + 6 个核心组件演示），所有模块都遵循「View 卡片容器 → 模块标题 → 功能组件」的结构。

return (
  <SafeAreaView style={styles.container}>
    <ScrollView ...>
      {/* 模块0：页面标题 */}
      {/* 模块1：Switch 开关组件 */}
      {/* 模块2：ActivityIndicator 加载指示器 */}
      {/* 模块3：TouchableOpacity 自定义按钮 */}
      {/* 模块4：FlatList 基础列表 */}
      {/* 模块5：SectionList 分组列表 */}
      {/* 模块6：KeyboardAvoidingView + TextInput 键盘适配输入框 */}
    </ScrollView>
  </SafeAreaView>
);

1、页面标题（非功能组件，用于页面说明）

<View style={styles.pageTitleWrap}>
  <Text style={styles.pageTitle}>App 组件整合演示（无 Picker 版本）</Text>
</View>

  1. 结构作用：

    • View style={styles.pageTitleWrap}：标题的容器，用于居中对齐标题文本（对应样式 alignItems: 'center'），并设置底部外边距（marginBottom: 30），和下方功能模块拉开距离。
    • Text style={styles.pageTitle}：RN 中唯一能显示文字的组件，这里用于展示页面的主标题，告诉用户这个页面的用途。

  2. 核心属性 / 样式：

    • styles.pageTitle 中 fontSize: 20（文字大小）、fontWeight: 'bold'（文字加粗）、color: '#333'（深灰色文字，提升可读性）。

  3. 运行效果：

        页面顶部居中显示一行 20 号大小的加粗深灰色文字，和下方内容间隔 30dp。

2、Switch 开关组件（开启 / 关闭状态切换）

<View style={styles.section}>
  <Text style={styles.sectionTitle}>1. 开关组件（Switch）</Text>
  <View style={styles.switchWrap}>
    <Text style={styles.switchText}>消息通知：{isSwitchEnabled ? '开启' : '关闭'}</Text>
    <Switch
      value={isSwitchEnabled}
      onValueChange={toggleSwitch}
      trackColor={{ false: '#e0e0e0', true: '#2196F3' }}
      thumbColor={isSwitchEnabled ? '#fff' : '#999'}
    />
  </View>
</View>

  1. 结构作用：

    • View style={styles.section}：所有功能模块的统一卡片容器，白色背景、圆角、阴影，让页面更美观，每个卡片间隔 30dp。
    • Text style={styles.sectionTitle}：模块小标题，说明当前模块展示的组件名称。
    • View style={styles.switchWrap}：开关和配套文字的容器，横向布局（flexDirection: 'row'）、垂直居中（alignItems: 'center'）、两端对齐（justifyContent: 'space-between'），让文字在左、开关在右。
    • Text：动态显示开关当前状态，使用三元运算符判断 isSwitchEnabled 状态（true 显示「开启」，false 显示「关闭」）。
    • Switch：RN 自带的开关组件，用于实现二选一的状态切换（如消息通知、权限开启等）。

  2. 核心属性详解：

    • value：绑定开关状态，值为布尔类型（true/false），这里绑定了前面用 useState 定义的 isSwitchEnabled，决定开关是「开启」还是「关闭」。
    • onValueChange：开关状态变化时的回调函数，开关被用户点击切换时，会自动传递新的状态值（true/false）给绑定的函数（这里是 toggleSwitch），用于更新 isSwitchEnabled 状态。
    • trackColor：开关的「轨道颜色」，接收一个对象，false 对应关闭状态的轨道颜色（浅灰色 #e0e0e0），true 对应开启状态的轨道颜色（蓝色 #2196F3）。
    • thumbColor：开关的「按钮颜色」（就是可以滑动的小圆块），这里用三元运算符动态切换，开启时为白色（#fff），关闭时为深灰色（#999）。

  3. 运行效果：

    • 卡片内左侧显示「消息通知：关闭」，右侧显示一个灰色开关。
    • 点击开关，开关会滑动到右侧，轨道变成蓝色，按钮变成白色，左侧文字同步变成「消息通知：开启」。
    • 再次点击，恢复初始状态，文字和开关样式也同步回退。

3、ActivityIndicator 加载指示器（转圈加载效果）

<View style={styles.section}>
  <Text style={styles.sectionTitle}>2. 加载指示器（ActivityIndicator）</Text>
  <View style={styles.loadingWrap}>
    <ActivityIndicator
      animating={isLoading}
      color="#2196F3"
      size="large"
    />
    <Text style={styles.loadingText}>{isLoading ? '加载中...' : '点击下方按钮触发加载'}</Text>
  </View>
</View>

  1. 结构作用：

    • View style={styles.loadingWrap}：加载指示器和提示文字的容器，垂直居中对齐（alignItems: 'center'），设置上下内边距，让内容不拥挤。
    • ActivityIndicator：RN 自带的加载指示器，用于展示「正在加载」的状态（如请求后端数据、处理耗时操作时）。
    • Text：动态显示加载相关提示文字，根据 isLoading 状态切换。

  2. 核心属性详解：

    • animating：是否显示加载动画，值为布尔类型，这里绑定 isLoading 状态（true 显示转圈，false 隐藏加载动画）。
    • color：加载动画的颜色，这里设置为蓝色（#2196F3），和按钮颜色保持一致，提升页面美观度。
    • size：加载动画的大小，可选值 large（大尺寸）和 small（小尺寸），这里用 large 更醒目。

  3. 运行效果：

    • 初始状态（isLoading: false）：加载指示器隐藏，显示文字「点击下方按钮触发加载」。
    • 点击下方自定义按钮后（isLoading: true）：显示一个蓝色的大尺寸转圈加载动画，下方文字变成「加载中...」。
    • 2 秒后（setTimeout 触发，isLoading: false）：加载动画隐藏，文字恢复初始状态。

模块 3：TouchableOpacity 自定义按钮（可点击交互组件）

<View style={styles.section}>
  <Text style={styles.sectionTitle}>3. 自定义按钮（TouchableOpacity）</Text>
  <TouchableOpacity
    style={styles.customBtn}
    onPress={handleCustomBtnClick}
    activeOpacity={0.5}
    disabled={isLoading}
  >
    <Text style={styles.customBtnText}>点击触发加载 & 弹窗</Text>
  </TouchableOpacity>
</View>

  1. 结构作用：

    • TouchableOpacity：RN 中常用的「可点击容器」，核心特点是点击时会出现透明反馈（用户能感知到自己点击了按钮），常用于制作自定义按钮、可点击列表项等。
    • 内部嵌套 Text：用于显示按钮上的文字内容。

  2. 核心属性详解：

    • style：按钮的样式，这里设置了蓝色背景、上下内边距、圆角、居中对齐，让按钮看起来美观且醒目。
    • onPress：点击事件回调函数，用户点击按钮时，会执行绑定的函数（这里是 handleCustomBtnClick），触发「弹出弹窗」和「显示加载动画」的逻辑。
    • activeOpacity：点击时的透明程度，值为 0-1 之间的数字，这里设置为 0.5（点击时按钮变成 50% 透明，松开后恢复），提升用户交互体验。
    • disabled：是否禁用按钮，值为布尔类型，这里绑定 isLoading 状态（true 时按钮禁用，无法点击；false 时按钮可用），避免用户在加载过程中重复点击按钮。

  3. 运行效果：

    • 初始状态：显示一个蓝色圆角按钮，上面有白色文字「点击触发加载 & 弹窗」，按钮可点击。
    • 点击按钮：
      1. 按钮瞬间变成 50% 透明，松开后恢复。
      2. 弹出系统级提示框（Alert.alert），标题「提示」，内容「自定义按钮被点击啦！」。
      3. 触发模块 2 的加载动画（setIsLoading(true)），同时按钮变为禁用状态（无法再次点击）。
    • 2 秒后：加载动画结束，按钮恢复可用状态，可再次点击。

截图展示：

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
# 学习 # react native # 鸿蒙系统
Logo
开源鸿蒙跨平台开发者社区

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

更多推荐

基于OpenHarmony的古诗词学习应用设计与实现

OpenHarmony是华为公司于2020年开源的操作系统项目，旨在打造面向全场景、全连接、全智能时代的分布式操作系统。该系统采用了微内核架构设计，具有模块化、可裁剪、安全性高等特点，能够灵活适配从智能手表到智能电视等多种设备。OpenHarmony的技术架构分为四个层次：内核层、系统服务层、框架层和应用层。内核层支持多种内核类型，包括Linux内核和LiteOS内核；系统服务层提供了分布式软总线

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

Hats测试用例HatsHdfDisplayBufferUtTest会导致设备panic问题解决

摘要： 在OpenHarmony 5.0.3系统(UIS7885平台)测试中，运行HatsHdfDisplayBufferUtTest时出现严重内存压力问题。测试进程高频申请图形缓冲区(累计2234MB)，触发35次低内存回收(LMK)，导致系统服务卡顿(最长阻塞38秒)。分析表明问题根源在于高频大块内存申请与回收机制失衡，而非内存泄漏。临时解决方案包括降低测试压力、增加延迟；根治方案通过引入分级

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

React Native

现在我们来改点代码，体验一下 RN 的开发手感。用 VS Code 打开MyFirstApp文件夹，找到根目录下的App.js（或App.tsxreturn (<Text style={styles.title}>👋 你好，React Native!</Text><Text style={styles.subtitle}>这是我的第一个跨平台 App</Text></View>// RN 使用

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