在 React 移动应用程序上设置应用程序链接

问题描述

我实际上正在制作一个移动应用程序，我会设置链接以在您点击它时打开它。 我尝试设置应用程序链接，但似乎无法正常工作...这是我的代码：

Manifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.didierurban.testLenny">
    ...
  <activity
    android:name="MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:screenorientation="portrait">
    ...
      <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="https" android:host="example.net" />
      </intent-filter>
    </activity>
  </application>
</manifest>

我的 assetlink.json（在 https://example.net/.well-known/assetlinks.json 上）

// 20210407190840
// https://lenny-girardot.fr/.well-kNown/assetlinks.json

[
  {
    "relation": [
      "delegate_permission/common.handle_all_urls"
    ],"target": {
      "namespace": "android_app","package_name": "com.didierurban.testLenny","sha256_cert_fingerprints": [
        "D4:DC:31:60:E9:B2:3F:2B:DF:23:33:31:49:D3:10:9F:3C:3A:6F:E6:1D:41:6E:DB:17:A3:3E:DD:1C:9C:6A:46"
      ]
    }
  }
]

app.json

{
  "expo": {
    "scheme": "...","name": "...","slug": "...","version": "1.0.0","orientation": "portrait","icon": "./assets/icon.png","splash": {
      "image": "./assets/splash.png","resizeMode": "contain","backgroundColor": "#ffffff"
    },"updates": {
      "fallbackToCacheTimeout": 0
    },"assetBundlePatterns": [
      "**/*"
    ],"ios": {
      "supportsTablet": true,"bundleIdentifier": "..."
    },"android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png","backgroundColor": "#FFFFFF"
      },"package": "..."
    },"web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

如果应用程序链接无法与 react 一起使用，我可以设置什么使其正常工作？ 我也尝试过使用 https://www.npmjs.com/package/node-deeplink 但它似乎已经过时了。

谢谢

解决方法

在 expo 上，您首先需要在 scheme 中指定一个 app.json。例如myawesomeapp。

你的清单文件也应该有这样的方案

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.didierurban.testLenny">
    ...
  <activity
    android:name="MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:screenOrientation="portrait">
    ...
      <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="myawesomeapp" />
      </intent-filter>
    </activity>
  </application>
</manifest>

在 ios 上，将其添加到 info.plist 此处

<key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>myawesomeapp</string>
            </array>
        </dict>
    </array>

然后您可以使用网址 myawesomeapp://

打开指向您的应用的链接

您还可以查看此 library 以从您的 React Native 应用程序链接到其他应用程序

有关博览会中深层链接的更多信息，请查看文档 here