跨平台React Native鸿蒙开发案例三：不继承RNAbilty，由原生页面跳转到RN页面

2301_79516858

287人浏览 · 2025-11-29 21:12:52

2301_79516858 · 2025-11-29 21:12:52 发布

说明

这是一个不继承RNAbilty，由原生页面跳转到RN页面的demo工程。

目录结构

RNProject – RN侧工程
NativeProject – 原生工程

环境搭建

在 library 目录下执行 ohpm i @rnoh/react-native-openharmony@x.x.x 安装依赖；
执行完成后，检查是否在 NativeProject、entry、library 目录下生成 oh-modules 文件夹；
在 RNProject/MainProject 中执行 npm i @react-native-oh/react-native-harmony@x.x.x或yarn add @react-native-oh/react-native-harmony@x.x.x 安装依赖；
在 RNProject/MainProject 中执行 npm run dev 命令打包；
用 DevEco Studio 打开 NativeProject，执行 Sync and Refresh Project；
点击 File > Project Structure > Signing Configs，登录并完成签名；
点击右上角的 run 启动项目。

import { Text, StyleSheet, View, Animated, Pressable } from 'react-native';
import React, { useEffect, useRef } from 'react';

function App() {
  return (
    // <View style={{marginTop: 200}}>
    <Text style={{ fontSize: 50, alignSelf: 'center', color: 'red' }}>这是RN页面</Text>
    // </View>
  );
}

export default App;

这是一个非常基础的 React Native 应用程序组件代码，虽然表面上看起来极其简单，但实际上蕴含着 React Native 框架的完整架构理念和现代移动应用开发的核心思想。这段代码定义了一个名为 App 的函数式组件，它构成了整个 React Native 应用的入口点和核心视图层。

从技术架构的角度来看，这段代码采用了 ES6 模块化系统，通过 import 语句引入了 React Native 的核心组件和 React 的 Hook 功能。Text 组件是 React Native 中最基础的文本显示组件，负责在移动设备上渲染文字内容。StyleSheet 提供了样式管理的解决方案，View 是容器组件，Animated 用于处理动画，Pressable 则是可点击的交互组件。虽然在这个简单的实现中只使用了 Text 组件，但其他导入的组件暗示了这个应用具备扩展交互功能和动画效果的潜力。

import { AppRegistry } from 'react-native';
import MainPage from './MainPage';

AppRegistry.registerComponent('App', () => MainPage);

代码的核心是 App 函数组件，它使用箭头函数的语法定义，返回一个 JSX 元素。JSX 是 JavaScript 的语法扩展，允许开发者在 JavaScript 代码中编写类似 HTML 的标记语言，这种设计极大地提高了 UI 代码的可读性和可维护性。在返回的 JSX 中，有一个被注释掉的 View 组件包裹层，以及一个显示"这是RN页面"文本的 Text 组件。这个文本使用了内联样式对象，设置了 50 像素的字体大小，通过 alignSelf: ‘center’ 实现水平居中，并使用红色作为文字颜色。

从 React Native 的渲染机制来分析，这段代码虽然简单，但完整地体现了跨平台开发的核心理念。当应用运行时，React Native 的桥接系统会将这个 JSX 结构转换为原生平台的 UI 组件。在 iOS 上，Text 组件会被映射为 UILabel 或 UITextView，在 Android 上则对应 TextView。这种映射不是简单的对应关系，而是通过复杂的序列化和反序列化过程实现的。

import { AppRegistry } from 'react-native';
import MainPage from './src/bundles/MainPage';

AppRegistry.registerComponent('App', () => MainPage);

样式系统是 React Native 的一个重要特性。虽然这里使用了内联样式，但通常在生产环境中会使用 StyleSheet.create 来创建优化的样式对象。字体大小设置为 50 像素，在移动设备上这是一个相对较大的尺寸，确保了文字的良好可读性。颜色设置为红色，这是一种高对比度的颜色选择，能够吸引用户的注意力。alignSelf: ‘center’ 则利用了 Flexbox 布局系统的特性，实现了单个元素在交叉轴方向上的居中定位。

注释掉的 View 组件暗示了开发者可能在进行布局调试或者考虑不同的容器方案。View 组件在 React Native 中相当于 Web 开发中的 div 元素，用于创建布局容器。如果取消注释，这个 View 会为文本提供一个顶部边距为 200 像素的容器，这在某些布局需求中可能很有用，比如避免内容被状态栏或刘海屏遮挡。