项目可以正常运行之后，我们来初步学习一下rn的基础知识。

一、入门代码

        我们先写一份入门演示程序，用于辅助学习。

/**
 * React Native 入门组件示例
 * 聚焦核心基础组件：View、Text、Image、TextInput、Button
 */

import React, { useState } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  Image,
  TextInput,
  Button,
  Alert, // 新增：导入 RN 的 Alert 组件（首字母大写）
} from 'react-native';

// 核心App组件（函数式组件，RN入门推荐）
function App() {
  // 定义状态：用于存储TextInput的输入内容（入门级状态使用演示）
  const [inputValue, setInputValue] = useState('');

  // 修复：将全局 alert 替换为 RN 的 Alert.alert()
  const handleButtonClick = () => {
    Alert.alert(
      '输入内容提示', // 弹窗标题（可选，推荐填写）
      `你输入的内容是：${inputValue || '暂无输入'}`, // 弹窗内容
      [{ text: '确定' }] // 弹窗按钮（可选，添加后更符合移动端交互）
    );
  };

  return (
    // 外层安全区域容器：确保内容在设备安全区域内显示
    <SafeAreaView style={styles.container}>
      {/* 1. View + Text 组件演示 */}
      <View style={styles.section}>
        <Text style={styles.title}>1. 基础文本（Text）</Text>
        <Text style={styles.content}>Hello React Native！</Text>
        <Text style={styles.subContent}>这是入门第一个基础组件</Text>
      </View>

      {/* 2. Image 组件演示（网络图片 + 本地图片注释） */}
      <View style={styles.section}>
        <Text style={styles.title}>2. 图片（Image）</Text>
        {/* 网络图片：必须指定width和height，否则无法显示 */}
        <Image
          source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
          style={styles.image}
          resizeMode="contain"
        />
        {/* 本地图片：需要先将图片放入项目，再通过require引入 */}
        {/* <Image source={require('./assets/icon.png')} style={styles.image} /> */}
      </View>

      {/* 3. TextInput 组件演示（带状态绑定） */}
      <View style={styles.section}>
        <Text style={styles.title}>3. 输入框（TextInput）</Text>
        <TextInput
          style={styles.input}
          placeholder="请输入一些内容..."
          placeholderTextColor="#999"
          value={inputValue}
          onChangeText={(text) => setInputValue(text)}
          clearButtonMode="while-editing"
        />
      </View>

      {/* 4. Button 组件演示（带点击事件） */}
      <View style={styles.section}>
        <Text style={styles.title}>4. 按钮（Button）</Text>
        <Button
          title="点击查看输入内容"
          onPress={handleButtonClick}
          color="#2196F3"
        />
      </View>
    </SafeAreaView>
  );
}

// 样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  section: {
    marginBottom: 30,
    alignItems: 'center',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 15,
  },
  content: {
    fontSize: 16,
    color: '#666',
    marginBottom: 5,
  },
  subContent: {
    fontSize: 14,
    color: '#999',
  },
  image: {
    width: 100,
    height: 100,
    marginVertical: 10,
  },
  input: {
    width: '100%',
    height: 44,
    backgroundColor: '#fff',
    paddingHorizontal: 15,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#ddd',
    fontSize: 16,
  },
});

export default App;

        将以上代码写入rn项目的app.tsx中（删除原来内容），重新打成bundle覆盖至rnoh项目目录下，重新运行rnoh截图如下：

RN 代码的核心是「组件」和「样式」，这段代码分为 4 个核心部分：

  1. 导入依赖（import 部分）
  2. 定义核心 App 组件（function App() 部分）
  3. 定义组件样式（const styles = StyleSheet.create() 部分）
  4. 导出 App 组件（export default App）

二、导入依赖

        即开头的import语句，这部分相当于「从 RN 的工具箱里拿出我们需要的工具」，不导入就无法使用对应的功能。

// 1. 从 react 库中导入：
// useState：用于管理组件的「临时数据」（比如输入框的内容），叫做「状态」
import React, { useState } from 'react';

// 2. 从 react-native 库中导入我们需要的「UI 组件」和「工具」
import {
  SafeAreaView, // 安全区域容器，解决手机刘海屏、底部导航栏遮挡内容的问题
  StyleSheet,   // 样式创建工具，专门用于定义 RN 组件的样式（类似网页的 CSS）
  View,         // 视图容器，类似网页的 <div>，用于包裹、布局其他组件
  Text,         // 文本组件，RN 中所有要显示的文字都必须放在这个组件里（不能直接写裸文本）
  Image,        // 图片组件，用于显示网络图片或本地图片
  TextInput,    // 输入框组件，用于接收用户的文字输入（类似网页的 <input>）
  Button,       // 按钮组件，用于创建可点击的按钮
  Alert,        // 弹窗工具，用于弹出手机端的原生提示框（不是网页的 alert）
} from 'react-native';

        请注意：

        RN 中没有网页的 HTML 标签（<div>、<p>、<img>），而是用自己的专属组件（View、Text、Image）。

  useState 是「React 钩子」，只在函数式组件中使用，后面会详细讲。

三、核心 App 组件（function App()）

        这是整个程序的「根组件」，相当于网页的 <body>，所有要显示的内容都在这里定义，RN 会把这个组件渲染到手机屏幕上。

        3.1 状态定义：const [inputValue, setInputValue] = useState('');

这是 RN 中管理「可变数据」的基础方式，叫做「状态钩子」。

  • 通俗理解：创建了一个「数据容器」inputValue，和一个「修改这个容器数据的工具」setInputValue。
  • useState('') 中的 '' 是这个数据的「初始值」（初始时输入框为空字符串）。
  • 作用：存储 TextInput（输入框）中用户输入的内容，当输入框内容变化时，inputValue 会同步更新，反之亦然（这叫做「数据绑定」）。

        3.2 按钮点击事件：const handleButtonClick = () => {...}

这是一个「自定义函数」，专门用于处理按钮的点击事件，当用户点击按钮时，会执行这个函数里的代码。

const handleButtonClick = () => {
  // Alert.alert()：RN 提供的原生弹窗方法，比网页的 alert 更符合移动端交互
  Alert.alert(
    '输入内容提示', // 弹窗的标题
    `你输入的内容是：${inputValue || '暂无输入'}`, // 弹窗的内容（模板字符串，获取输入框的状态值）
    [{ text: '确定' }] // 弹窗的按钮（一个数组，可以放多个按钮）
  );
};
  • 重点：${inputValue || '暂无输入'} 是 ES6 的模板字符串，作用是「如果 inputValue 有内容，就显示它；如果为空，就显示『暂无输入』」。
  • 为什么不用网页的 alert()？因为 RN 是跨移动端框架，alert() 在手机上体验很差，Alert.alert() 是原生弹窗，更美观、更符合手机用户的使用习惯。

        3.3 返回渲染内容：return (...)

这部分是「要显示在屏幕上的 UI 内容」，所有组件都嵌套在这里，采用 JSX 语法（看起来像 HTML，其实是 JavaScript 的扩展）。

        请注意：

  • JSX 中标签必须闭合（比如 <View> 必须对应 </View>，<Image> 要写成 <Image />）。
  • 组件的属性（叫做「props」）和 HTML 略有不同，比如 HTML 的 class 在 RN 中是 style，HTML 的 onclick 在 RN 中是 onPress。
  • 所有内容必须被一个「根容器」包裹（这里是 SafeAreaView），不能并列多个顶级组件（比如不能直接返回 <View></View><View></View>）。

欢迎加入开源鸿蒙跨平台社区：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 开源鸿蒙跨平台开发者社区