Description

This is a demo project showcasing navigation between native and RN pages.

Directory Structure

NativeReactNavSwitch
├── NavigationProject -- RN project
└── NavigationApp -- Native project

Environment Setup

1. In the NavigationProject/MainProject directory, run pnpm setup to install dependencies and run pnpm dev to generate the bundle;
2. Open NavigationApp in DevEco Studio and wait for the automatic project synchronization to complete (for manual synchronization, execute Sync and Refresh Project);
3. Click File > Project Structure > Signing Configs, log in and complete the signing;
4. Click run in the upper right corner to start the project.

NOTE: The project uses the latest RNOH dependencies by default during installation. If you need to install a specific version, please refer to RNOH Version Evolution Planning and Branch Strategy to get the version number.

npm dependency installation: npm i @react-native-oh/react-native-harmony@0.84.xx npm i --save-dev @react-native-oh/react-native-harmony-cli@0.84.xx

ohpm dependency installation: ohpm i @rnoh/react-native-openharmony@0.84.xx

Preview

After successfully running the demo project, open the application as shown below:

Navigate to RN Page B Operation: Click the "Navigate to RN Page B" button on the home page to navigate to RN Page B. Effect: As shown below

Navigate to Native Page C Operation: Click the "Navigate to Native Page C" button on RN Page B to navigate to Native Page C. Effect: As shown below

Return to RN Page B Operation: Click the "Back to Previous Page" button on Native Page C or swipe back to return to RN Page B. Effect: As shown below

Return to Native Page A Operation: Click the "Back to Previous Page" button on RN Page B or swipe back to return to Native Page A. Effect: As shown below