怎么在 React Native 应用中处理深度链接？

深度链接是一种技术，其中给定的 URL 或资源用于在移动设备上打开特定页面或屏幕。因此，深度链接可以引导用户到应用程序内的特定屏幕，而不仅仅是启动移动设备上的应用程序，从而提供更好的用户体验。这个特定的屏幕可能位于一系列层次结构页面下，因此称之为"深度"链接。

它对于营销活动，应用用户保留等非常有用。作为一个应用用户，你可能在打开链接时体验过深度链接，例如，从网页浏览器打开电子商务商店中的产品链接。如果你已经安装了该商店的应用，它可能会使用深度链接来打开应用，并直接导航你到该产品的屏幕。

在本教程中，让我们通过创建一个示例应用来学习如何在 React Native 应用中处理深度链接。我们将创建一个简单的应用来处理深度链接，并通过使用 React Navigation 库来配置深度链接。可以在此 GitHub 仓库中找到本教程的完整代码。

开始之前，介绍一下最近很火的开源技术，低代码。让使用者可以通过可视化的方式，以更少的编码，更快速地构建和交付应用软件，极大程度地降低了软件的开发、配置、部署和培训成本。

应用地址： https://www.jnpfsoft.com
开发语言：Java/.net

这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类，方便扩展；采用微服务、前后端分离架构，集成了代码生成器，支持前后端业务代码生成，满足快速开发；框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用；后端框架支持 Vue2、Vue3，平台即可私有化部署，也支持 K8S 部署。话不多说，开始吧！

深度链接配置 React Native 应用中的导航

我们从创建一个新的 React Native 应用程序开始。首先，打开终端并运行以下命令：

npx react-native init rnDeepLinking

# after the project is generated by the above command
# navigate to the rnDeepLinking directory
cd rnDeepLinking

在本教程中，您将构建的示例应用将包含两个屏幕。第一个屏幕将是带有物品列表的主屏幕。第二个屏幕将是显示物品详细信息的详细信息屏幕。

我们配置 React Navigation 版本 6 并安装所需的依赖项。这将允许通过导航配置深度链接，并在两个屏幕之间进行导航。

yarn add @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context

下一步是链接您刚刚安装的所有库。此示例应用程序使用的是 0.67.x 版本的 React Native。

在 iOS 设备上，必须运行以下一组命令。

npx pod-install ios

对于 Android，打开文件 android/app/src/main/java/<您的 React Native 项目名称>/MainActivity.java 并添加以下代码片段：

package com.rndeeplinking;

import android.os.Bundle;
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "rnDeepLinking";
  }
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
}

这就是在一个裸露的 React Native 应用中配置 React Navigation 库所需的全部内容。

注意：在裸露的 React Native 项目中配置 React Navigation 库的过程可能会改变。建议按照官方文档的指示进行操作。

创建主页和详情屏幕

创建一个名为 src/screens 的新目录。这将包含应用程序的所有屏幕组件。在其中，创建两个新文件：HomeScreen.js 和 DetailsScreen.js。

HomeScreen.js 文件从 Json 占位符 API 的模拟数据数组中显示一份人员名单。该列表使用 React Native 的 FlatList 组件进行渲染。

每个列表中的人都被 Pressable 组件包裹，这样当应用用户按下列表中的用户名称时，他们将导航到详情屏幕。

// src/screens/HomeScreen.js

import React, { useState, useEffect } from 'react';
import {
  ActivityIndicator,
  View,
  Text,
  FlatList,
  Pressable
} from 'react-native';

import Separator from '../components/Separator';

const HomeScreen = ({ navigation }) => {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(res => {
        setData(res);
        setIsLoading(false);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  const renderList = ({ item }) => {
    return (
      <Pressable
        onPress={() => alert('Navigate to Details screen')}
        style={{ paddingHorizontal: 10 }}
      >
        <Text style={{ fontSize: 24, color: '#000' }}>{item.name}</Text>
      </Pressable>
    );
  };

  return (
    <View style={{ flex: 1 }}>
      {isLoading ? (
        <ActivityIndicator color="blue" size="large" />
      ) : (
        <>
          <FlatList
            data={data}
            contentContainerStyle={{
              paddingVertical: 20
            }}
            keyExtractor={item => item.id}
            ItemSeparatorComponent={Separator}
            renderItem={renderList}
          />
        </>
      )}
    </View>
  );
};

export default HomeScreen;

我们也在 src/components 目录中创建一个新文件，命名为 Separator.js。这个文件包含一个<Separator />组件，用于在 HomeScreen 中划分列表项。 <Separator />组件是一个带有一些附加样式的简单视图。

它被用作 FlatList 组件中 prop ItemSeparatorComponent 的值。 ItemSeparatorComponent prop 定义了一个自定义分隔符，并在列表中的每个项目之间渲染。

/ src/components/Separator.js

import React from 'react';
import { View } from 'react-native';

const Separator = () => (
  <View
    style={{
      borderBottomColor: '#d3d3d3',
      borderBottomWidth: 1,
      marginTop: 10,
      marginBottom: 10
    }}
  />
);

export default Separator;

对于详细信息屏幕，现在，让我们只在屏幕组件文件 DetailsScreen.js 中显示一个文本字符串：

import React from 'react';
import { View, Text } from 'react-native';

const DetailsScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
};

export default DetailsScreen;

设置堆栈导航器

要在应用中设置堆栈导航器，请创建一个名为 src/navigation/RootNavigator.js 的新文件，并添加以下代码片段：

/ src/navigation/RootNavigator.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HomeScreen from '../screens/HomeScreen';
import DetailsScreen from '../screens/DetailsScreen';

const RootStack = createNativeStackNavigator();

const RootNavigator = () => {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen name="Home" component={HomeScreen} />
        <RootStack.Screen name="Details" component={DetailsScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

export default RootNavigator;

然后，在 App.js 文件中导入 RootNavigator：

// App.js

import React from 'react';

import RootNavigator from './src/navigation/RootNavigator';

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

export default App;

要构建并运行该应用，打开两个终端窗口实例。在第一个实例中，运行 npx react-native start。这将启动 React Native 打包器。

要为 iOS 或 Android 构建应用程序，请在终端窗口的第二个实例中运行适当的命令。这将为你指定的平台构建应用程序。

# for iOS
npx react-native run-ios

# for android
npx react-native run-android

一旦应用程序构建完成，上述命令将会在指定平台上安装它。以下是该应用程序在 iOS 模拟器和真实 Android 设备上运行的示例：

在 React Navigation 中配置深度链接

在 React Native 应用程序中处理深度链接有两种方法：

无需导航：通过 JavaScript 调用 React Native 的核心库并直接调用 Linking。您可以在 React Native 的官方文档中了解更多关于此的信息。
通过配置 React Navigation 库进行导航

大多数生产级应用程序都有多个屏幕和嵌套的导航器。所以，让我们看看如何在我们的示例应用中使用 React Navigation 来实现它。

要允许 React Navigation 库通过其路由逻辑处理深度链接，需要定义一个配置对象。在此对象中，定义一个包含 URI 方案的前缀属性。应用程序是基于此 URI 方案打开的。

然后，将此配置对象传递给 NavigationContainer 上名为 linking 的 prop。另外，在容器上添加一个 fallback prop。它将渲染并显示加载指示器，直到深层链接被解析。

// src/navigation/RootNavigator.js

// rest of the import statement remains same
import { ActivityIndicator } from 'react-native';

const linking = {
  prefixes: ['peoplesapp://']
};

const RootNavigator = () => {
  return (
    <NavigationContainer
      linking={linking}
      fallback={<ActivityIndicator color="blue" size="large" />}
    >
      <RootStack.Navigator>
        <RootStack.Screen name="Home" component={HomeScreen} />
        <RootStack.Screen name="Details" component={DetailsScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

使用 URI-scheme 包来配置 URI 方案

而不是手动设置 iOS 和 Android 的 URI 方案，可以使用 uri-scheme npm 包。它允许在 iOS 和 Android 设备上配置和测试本地 URI 方案。

注意：如果您想深入研究并手动为 iOS 和 Android 设置 URI 方案，请查看接下来的两个部分。

要设置该方案，请为适当的平台运行以下命令：

# for iOS
npx uri-scheme add peoplesapp --ios

# for Android
npx uri-scheme add peoplesapp --android

完成此步骤后，请确保使用 npx react-native run-ios 或 npx react-native run-android 再次为特定平台构建应用程序。

iOS 配置方案

要手动为 iOS 设备设置方案，请打开 ios/your-project-name/AppDelegate.m 文件并添加以下代码片段：

/ Add the header at the top of the file:
#import <React/RCTLinkingManager.h>

// Add this above `@end`:
- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

现在，让我们将 URI 方案添加到 iOS 项目配置中。打开 Xcode 中的 Your-app-name/ios/app-name.xcworkspace。

然后，在左侧边栏中选择项目名称，然后导航到信息选项卡：

接下来，转到 URL Types，点击+（加号）按钮，在标识符和 URL 方案下，添加 peoplesapp。

URL Types 与 web URL 中的 http 表示的类似。这是 iOS 用来打开应用程序的内容。

在此配置步骤之后，使用 npx react-native run-ios 重新构建您的 iOS 应用程序。

为 Android 配置方案

要为 Android 设备手动设置方案，您需要配置该方案。打开/android/app/src/main/AndroidManifest.xml 并将 launchMode 的值设置为 singleTask。要添加方案，请按照下面的示例添加一个新的 intent-filter 标签：

<!-- Set the launchMode to singleTask in <activity> -->
<activity
  android:name=".MainActivity"
  android:label="@string/app_name"
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
  android:launchMode="singleTask"
  android:windowSoftInputMode="adjustResize">
  <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
  <!-- Add this new intent-filter tag -->
  <!-- Make sure to set the value of android:scheme to your own scheme -->
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="peoplesapp" />
  </intent-filter>
</activity
>

在此配置步骤之后，使用 npx react-native run-android 重新构建您的 Android 应用。

测试 iOS 应用程序

然后，在终端窗口中，运行以下命令：

# replace peoplesapp:// with your own URL
xcrun simctl openurl booted peoplesapp://

# OR use uri-scheme package to test
npx uri-scheme open peoplesapp:// --ios

这将打开示例应用程序：

也可以通过在模拟器设备上打开网络浏览器并运行 URL peoplesapp://来测试它。它将询问您是否打开外部 URI，如下所示：

测试安卓应用程序

为了测试到目前为止的配置设置，我正在使用一个真实的 Android 设备。您也可以使用 Android 模拟器。在测试之前，请确保如果示例应用程序已经在运行，要关闭它。

从终端窗口，运行以下命令：

# replace peoplesapp:// with your own URL
adb shell am start -W -a android.intent.action.VIEW -d "peoplesapp://"

# OR use uri-scheme package to test
npx uri-scheme open peoplesapp:// --android

运行上述命令后的输出如下：

嵌套屏幕配置

要在访问具有 URL 方案的详细信息屏幕时显示每个人的信息，必须配置详细信息屏幕的路径，并添加一个代表列表中人员 id 的动态参数。

const linking = {
  prefixes: ['peoplesapp://'],
  config: {
    initialRouteName: 'Home',
    screens: {
      Home: {
        path: 'home'
      },
      Details: {
        path: 'details/:personId'
      }
    }
  }
}

personId 现在可以作为路由参数在详情屏幕上使用。路由参数可以通过 React Navigation 库的 route.params 在屏幕上访问。

根据 personId 的值，详情屏幕将从 API 获取数据并显示该人的信息。

我们也处理一种情况，即应用程序用户从主屏幕导航到详情屏幕，也就是说，不使用链接。在这种情况下，打开 HomeScreen.js 并替换 Pressable 组件上的 onPress 属性值，如下所示：

<Pressable
  onPress={() => navigation.navigate('Details', { personDetailsId: item.id })}
  style={{ paddingHorizontal: 10 }}
>
  <Text style={{ fontSize: 24, color: '#000' }}>{item.name}</Text>
</Pressable>

请注意，personDetailsId 是传递给上述片段中的 Details 屏幕的路由参数。只有当用户从主屏幕导航到 Details 屏幕时，才会获取某人的详细信息。

在详细信息屏幕中，我们从 route.params 对象中获取 personDetailsId（来自主屏幕的 id）和 personId（从 URL 方案中使用的 id）。

然后使用 useEffect 钩子，从 Json Placeholder API 获取数据并渲染详细信息：

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

const DetailsScreen = ({ route }) => {
  const params = route.params || {};
  const { personDetailsId, personId } = params;

  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (personId) {
      fetch(`https://jsonplaceholder.typicode.com/users/${personId}`)
        .then(res => res.json())
        .then(res => {
          const fetchedDetails = [];

          Object.keys(res).forEach(key => {
            fetchedDetails.push({ key, value: `${res[key]}` });
          });
          setData(fetchedDetails);
          setIsLoading(false);
        })
        .catch(error => {
          console.log(error);
        });
    } else {
      fetch(`https://jsonplaceholder.typicode.com/users/${personDetailsId}`)
        .then(res => res.json())
        .then(res => {
          const fetchedDetails = [];

          Object.keys(res).forEach(key => {
            fetchedDetails.push({ key, value: `${res[key]}` });
          });

          setData(fetchedDetails);
          setIsLoading(false);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {isLoading ? (
        <ActivityIndicator color="blue" size="large" />
      ) : (
        <View style={{ paddingTop: 10, paddingHorizontal: 10 }}>
          {data.map(person => (
            <Text
              style={{ fontSize: 24, paddingBottom: 2 }}
              key={person.key}
            >{`${person.key}: ${person.value}`}</Text>
          ))}
        </View>
      )}
    </View>
  );
};

export default DetailsScreen;

通过从列表中按下某人的名字从主页导航到详细信息屏幕时，这是输出：