React Native Deep Linking 实践教程

React Native Deep Linking 实践教程

项目目录结构及介绍

本开源项目react-native-deep-link围绕在React Native应用程序中集成深度链接功能，其目录结构精心设计以支持快速理解和应用。以下是关键部分的概览：

.
├── node_modules                     # 第三方依赖库
├── src                              # 源代码目录
│   ├── components                   # 公共组件存放处
│   ├── screens                      # 各个屏幕相关代码
│   │   ├── HomeScreen.js             # 主屏示例
│   │   └── DetailsScreen.js          # 详情屏示例
│   ├── App.js                       # 应用入口文件
│   └── navigation                  # 导航相关的配置
│       ├── StackNavigator.js        # 使用React Navigation定义的StackNavigator
│       └── index.js                 # 导航初始化
├── android                           # Android平台相关代码
├── ios                               # iOS平台相关代码
├── package.json                      # 项目配置与依赖管理
└── README.md                         # 项目说明文件

• src 目录集中了应用的主要逻辑和UI，其中screens包含通过深度链接可访问的具体页面。
• navigation 文件夹用于设置导航系统，确保深度链接能够正确导向目标屏幕。
• App.js 是应用启动的关键，通常负责整体架构和初始化设置。

项目的启动文件介绍

• App.js 应用程序的起点。在这里，开发者需要整合路由和导航容器，实现深度链接的基础配置。典型的配置示例包括引入导航器并设置关联的深度链接规则，确保当应用启动时或收到外部URL时，可以跳转到正确的界面。

项目的配置文件介绍

深度链接的配置主要分布在以下几个文件中：

• android/app/src/main/AndroidManifest.xml 在Android平台上，需要在这里添加intent-filter来注册你的深度链接模式，例如：

  <activity ...>
      ...
      <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="your_scheme"/>
      </intent-filter>
  </activity>
  

• ios/YourProjectName/Info.plist 对于iOS，深度链接的配置涉及修改此文件，添加URL Types：

  <key>CFBundleURLSchemes</key>
  <array>
      <string>your_scheme</string>
  </array>
  

• src/navigation/index.js 在React Navigation的上下文中，这里进行导航配置，关联URL与屏幕之间的映射，比如使用useLinking hook和配置<NavigationContainer>来识别和处理深度链接。

请注意，具体配置细节可能因项目版本和React Navigation版本的不同而有所差异，因此总是参考最新的官方文档和该特定开源项目中的具体实现为准。