android、ios配置scheme之后，react-native如何获取url，并且自动跳转到首页

这篇文章距离上次修改已过237天，其中的内容可能已经有所变动。

在React Native中，要获取Android和iOS上配置scheme后的URL，可以使用Linking API。以下是如何获取URL并自动跳转到首页的示例代码：

import { AppState, Linking, Platform } from 'react-native';

// 监听链接事件
Linking.addEventListener('url', handleOpenURL);

// 处理打开URL
function handleOpenURL(event) {
  const url = event.url; // 获取URL
  navigateToHome(url); // 根据URL导航到首页
}

// 导航到首页
function navigateToHome(url) {
  // 你的导航到首页的逻辑
}

// 应用状态改变的监听
AppState.addEventListener('change', handleAppStateChange);

// 处理应用状态变化
function handleAppStateChange(state) {
  if (state === 'active') {
    Linking.getInitialURL().then(initialUrl => {
      if (initialUrl) {
        navigateToHome(initialUrl); // 自动跳转到首页
      }
    });
  }
}

// 组件卸载时移除监听
componentWillUnmount() {
  Linking.removeEventListener('url', handleOpenURL);
  AppState.removeEventListener('change', handleAppStateChange);
}

确保你的应用在AndroidManifest.xml（对于Android）或Info.plist（对于iOS）中正确配置了scheme。

对于Android，在AndroidManifest.xml中添加如下：

<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="yourscheme" />
</intent-filter>

对于iOS，在Info.plist中添加如下：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>yourscheme</string>
        </array>
    </dict>
</array>

将yourscheme替换为你的scheme名称。

android、ios配置scheme之后，react-native如何获取url，并且自动跳转到首页

评论已关闭

推荐阅读