HarmonyOS鸿蒙Next中从鸿蒙侧跳转到RN指定页面如何实现

HarmonyOS鸿蒙Next中从鸿蒙侧跳转到RN指定页面如何实现 需要从鸿蒙原生跳转到RN某页面如何实现？

3 回复

想要从鸿蒙侧跳转到指定RN页面建议采取多bundle，或者通过rn侧首页跳转到指定页面。

可以通过Linking或react-navigation/native的useRoute Hook来获取传递的参数。

import { useRoute } from '@react-navigation/native';

const route = useRoute();

// 获取参数
const { mo } = route.params;

或者

import { Linking, useEffect } from 'react-native';

useEffect(() => {
  Linking.getInitialURL().then(url => {
    if (url) {
      const { routeLink, mo } = parse(url); // 自定义解析函数
      // 使用参数
    }
  });
}, []);

原生和rn侧交互方式与ios相同，将要传递的参数通过initialProps传递，rn侧可以通过 params来接收这些参数。例如：

const App = (params) => {
  return (
    <View>
    <Text>Initial Param: {props.initialParam}</Text>
    </View>
  );
};

可以使用this.props来访问传递的参数. const { routeLink, mo } = this.props;

更多关于HarmonyOS鸿蒙Next中从鸿蒙侧跳转到RN指定页面如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，从鸿蒙侧跳转到React Native（RN）指定页面可以通过以下步骤实现：

  1. 配置路由：首先在RN项目中配置好路由，确保目标页面有对应的路由路径。

  2. 桥接方法：在RN项目中创建一个Native Module，暴露一个方法供鸿蒙侧调用。该方法接收目标页面的路由路径作为参数。

  3. 鸿蒙侧调用：在鸿蒙侧通过调用上述Native Module暴露的方法，传入目标页面的路由路径，触发页面跳转。

  4. 页面跳转：RN接收到鸿蒙侧的调用后，根据传入的路由路径进行页面跳转。

具体代码实现如下：

在RN项目中创建一个Native Module（例如NavigationModule）：

import { NativeModules } from 'react-native';

const { NavigationModule } = NativeModules;

export const navigateToPage = (routeName) => {
  NavigationModule.navigateToPage(routeName);
};

在鸿蒙侧调用该方法：

// 假设已经获取到RN的Native Module实例
navigationModule.navigateToPage("TargetPage");

在RN项目中配置路由：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="TargetPage" component={TargetPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

在HarmonyOS鸿蒙Next中，从鸿蒙侧跳转到React Native（RN）指定页面，可以通过以下步骤实现：

  1. 定义路由: 在RN项目中，使用react-navigation等路由库定义页面路由。

  2. 鸿蒙侧调用: 在鸿蒙侧通过JSBridge或NativeModule调用RN的导航方法。例如，使用NativeModules.NavigationModule.navigateToPage('PageName')。

  3. 传递参数: 如果需要传递参数，可以在调用时传递JSON对象，RN侧解析后用于页面初始化。

  4. 页面跳转: RN侧接收到跳转指令后，使用navigation.navigate('PageName', params)实现页面跳转。

确保鸿蒙与RN间的通信模块已正确配置，以实现无缝跳转。

回到顶部