这是一个基于 React Native 与鸿蒙系统集成的跨平台导航应用页面代码。从技术架构的宏观层面来看，这段代码构建了一个具有完整导航功能的页面B，它作为应用中的一个中间页面，既可以向前跳转到原生页面C，也可以向后返回到上一个页面。

在代码的导入部分，首先引入了 React 核心库以及 React Native 的基础组件：View 作为容器组件用于布局，Text 用于显示文本内容，Button 提供可点击的交互元素，StyleSheet 用于创建样式对象。特别值得注意的是 NavigationTurboModule 的导入，这是一个专门为鸿蒙系统定制的导航模块，用于实现 React Native 页面与原生页面之间的无缝跳转。

说明

这是一个原生页面和RN页面相互跳转的demo工程。

目录结构

NavigationProject – RN侧工程
NavigationApp – 原生工程

环境搭建

1. 在 NavigationProject/MainProject 目录下执行 npm run i或yarn i 安装依赖，执行 npm run dev 生成 bundle；
2. 在 entry 目录下执行 ohpm i @rnoh/react-native-openharmony 安装依赖；
3. 检查 NavigationApp、entry 目录下是否生成 oh-modules 文件夹；
4. 用 DevEco Studio 打开 NavigationApp，执行 Sync and Refresh Project；
5. 点击 File > Project Structure > Signing Configs，登录并完成签名；
6. 点击右上角的 run 启动项目。

效果预览

在成功运行demo工程之后，打开应用如下图所示：

CustomHeader 是一个自定义的头部组件，它接收 title 作为参数，返回一个包含标题文本的视图。这个组件的设计体现了 React 组件化的思想，通过参数化的方式实现 UI 的复用。

PageB 组件是整个页面的核心实现。它定义了两个重要的导航函数：handleNavigationPush 用于向前导航，通过 NavigationTurboModule.navigatePush(“NativePageC”) 实现跳转到原生页面C的功能。handleNavgationPop 则用于向后导航，通过 NavigationTurboModule.navigatePop() 返回上一个页面。

在 UI 构建方面，页面采用层次化的布局结构。最外层是 container 视图，设置了浅灰色背景。内部包含 CustomHeader 组件，显示"这是RN页面B"的标题。buttonContainer 作为按钮容器，使用 Flexbox 布局实现垂直居中排列。

样式系统通过 StyleSheet.create 方法定义，这是一种性能优化的做法。container 样式设置了 flex: 1 使其充满整个屏幕，同时定义了背景颜色。header 样式采用水平排列，设置了内边距、白色背景和底部边框，创建了清晰的视觉分隔。

headerTitle 样式设置了适当的字体大小和左边距，确保标题文本具有良好的可读性。buttonContainer 使用 flex: 1 占据剩余空间，并通过 justifyContent 和 alignItems 实现子元素的居中显示。

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { NavigationTurboModule } from 'react-native-harmony-navigation-package';

// 自定义导航头
const CustomHeader = ({ title }) => {
  return (
    <View style={styles.header}>
      <Text style={styles.headerTitle}>{title}</Text>
    </View>
  );
};

// React Native页面B
const PageB = () => {
  const handleNavigationPush = () => {
    NavigationTurboModule.navigatePush("NativePageC");
  };

  const handleNavgationPop = () => {
    NavigationTurboModule.navigatePop();
  };

  return (
    <View style={styles.container}>
      <CustomHeader title="这是RN页面B" />
      <View style={styles.buttonContainer}>
        <Button
          title="跳转到原生页面C"
          onPress={handleNavigationPush}
          style={styles.button}
        />
        <View style={styles.buttonSpacing} />
        <Button
          title="回到上一个页面"
          onPress={handleNavgationPop}
          style={styles.button}
        />
      </View>
    </View>
  );
};

const App = () => {
  return <PageB />;
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
  headerTitle: {
    fontSize: 18,
    marginLeft: 10,
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
  buttonContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 20,
  },
  buttonSpacing: {
    height: 20,
  },
  button: {
    width: 200,
    marginVertical: 10,
  },
});

export default App;

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