Linking

Linking提供了一个通用的接口来与传入和传出的 App 链接进行交互。

处理 Deep Links
有两种方法来处理打开应用程序的 URL。

1. 如果应用程序已经打开，应用程序就会出现在前台，并触发一个链接 ‘url’ 事件
   你可以用 Linking.addEventListener(‘url’, callback) 来处理这些事件——它使用链接的 URL 调用 callback({ url })

2. 如果应用程序还没有打开，它就会被打开，并将 url 作为 initialURL 传入
   你可以用 Linking.getInitialURL() 来处理这些事件——它会返回一个解析到 URL 的 Promise (如果有的话)。

好的，以下是关于在 React Native 中实现深度链接（Deep Links）的详细指南，结合了官方 Linking API 和社区常用方案的最佳实践。

深度链接的核心目标是：让用户通过一个标准的 URL（如 https://yourapp.com/product/123 或 myapp://open?id=123），直接打开你的应用并跳转到指定的内部页面，而不是停留在应用首页。

一、核心概念与工作流程

深度链接的工作流程可以概括为三个步骤：

1. 声明与接收：在应用的原生代码（Android 的 AndroidManifest.xml 或 iOS 的 AppDelegate.m）中声明应用能够处理的 URL 格式（Scheme 和 Host）。当用户点击链接时，操作系统会根据这个声明将链接“投递”给你的应用。
2. 解析与处理：React Native 应用启动后，通过 Linking API 检测到这个传入的链接，并解析出其中的参数。
3. 导航与展示：将解析出的参数传递给应用的导航器（如 React Navigation），从而实现页面的精准跳转。

二、 React Native 端实现

在你的应用入口文件（如 App.js）中，使用 Linking API 来监听和处理链接。

import React, { useEffect } from 'react';
import { Linking, NavigationContainer } from 'react-navigation'; // 注意：React Navigation 的版本可能不同，请根据实际导入
// 假设你已经配置好了 React Navigation
import RootNavigator from './src/navigation/RootNavigator';

const App = () => {
  useEffect(() => {
    // 处理接收到的链接
    const handleUrl = async (url) => {
      try {
        // 解析 URL 参数
        const urlObj = new URL(url);
        const params = new URLSearchParams(urlObj.search);
        const productId = params.get('id');
        const screen = params.get('screen') || 'Home';

        // 触发导航，传递参数
        // 这里的 navigation 是从 React Navigation 获取的实例
        // 具体方式取决于你的导航结构
        navigation.navigate(screen, { id: productId });
      } catch (error) {
        console.warn('无效的深度链接格式:', url);
      }
    };

    // 监听链接事件
    const subscription = Linking.addEventListener('url', ({ url }) => {
      handleUrl(url);
    });

    // 检查应用冷启动时是否携带了链接
    Linking.getInitialURL().then(initialUrl => {
      if (initialUrl) {
        handleUrl(initialUrl);
      }
    });

    // 清理监听器
    return () => subscription.remove();
  }, []);

  return (
    <NavigationContainer>
      <RootNavigator />
    </NavigationContainer>
  );
};

export default App;

实际真实案例演示：

这段React Native代码实现了一个深度链接处理应用，其核心功能是检测并显示用户通过外部链接打开应用时的初始URL。这种技术在移动应用开发中非常重要，它允许应用响应来自其他应用、网页或通知的链接调用，是实现应用间通信和用户导流的关键机制。

代码采用自定义Hook的设计模式，通过useInitialURL这个自定义Hook来封装深度链接的处理逻辑。这个Hook内部维护了两个状态变量：url用于存储获取到的深度链接URL，processing用于标识当前是否正在处理链接获取过程。这种状态分离的设计使得应用能够清晰地表达当前的处理状态，为用户提供准确的反馈信息。

import React, {useState, useEffect} from 'react';
import {Linking, StyleSheet, Text, View} from 'react-native';

const useInitialURL = () => {
  const [url, setUrl] = useState<string | null>(null);
  const [processing, setProcessing] = useState(true);

  useEffect(() => {
    const getUrlAsync = async () => {
      // Get the deep link used to open the app
      const initialUrl = await Linking.getInitialURL();

      // The setTimeout is just for testing purpose
      setTimeout(() => {
        setUrl(initialUrl);
        setProcessing(false);
      }, 1000);
    };

    getUrlAsync();
  }, []);

  return {url, processing};
};

const App = () => {
  const {url: initialUrl, processing} = useInitialURL();

  return (
    <View style={styles.container}>
      <Text>
        {processing
          ? 'Processing the initial url from a deep link'
          : `The deep link is: ${initialUrl || 'None'}`}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

在useEffect钩子中，代码定义了一个异步函数getUrlAsync，这个函数通过Linking.getInitialURL()方法来获取启动应用的深度链接。这个方法返回一个Promise，因此需要使用await关键字来等待结果。值得注意的是，代码中特意添加了一个setTimeout延迟，这是为了模拟实际应用中可能出现的网络延迟或处理时间，让开发者能够观察到加载状态下的用户界面表现。

当组件首次挂载时，useEffect会立即执行getUrlAsync函数。在获取到初始URL后，经过1秒的延迟，组件会同时更新url和processing两个状态。这种设计模式确保了状态更新的一致性，避免了中间状态的出现。

在主应用组件App中，通过调用useInitialURL Hook获取到处理结果，包括初始URL和处理状态。然后根据processing状态的值来条件渲染不同的文本内容：当处于处理状态时显示"Processing the initial url from a deep link"，处理完成后则显示实际的深度链接URL或"None"（如果没有深度链接）。

界面设计采用了典型的居中布局，通过flex: 1确保容器占据整个屏幕空间，justifyContent和alignItems属性实现内容的垂直和水平居中。这种简洁的界面设计专注于核心功能的展示，避免了不必要的视觉干扰。

深度链接技术在现代移动应用生态中扮演着重要角色。它使得应用能够被特定格式的URL唤醒并传递参数，常见的应用场景包括社交媒体分享、电子邮件验证链接、营销推广活动等。例如，当用户点击一个指向特定商品页面的链接时，应用可以直接打开并跳转到对应的商品详情，而不是仅仅停留在首页。

这种实现方式展示了React Hooks在逻辑复用方面的强大能力。通过将深度链接处理逻辑封装在自定义Hook中，代码变得高度可复用，其他组件也可以轻松地使用相同的逻辑。同时，这种设计也符合React的函数式编程理念，使得状态管理和副作用处理更加清晰和可预测。

整个应用的架构体现了现代React Native开发的最佳实践：关注点分离、逻辑复用、状态驱动UI。这种模式不仅提高了代码的可维护性，也为后续的功能扩展奠定了良好的基础。例如，可以在此基础上添加更多深度链接处理逻辑，如参数解析、路由跳转、错误处理等，构建出更加完善的深度链接处理系统。

打包

接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

最后运行效果图如下显示：