React Native 下面Android 下的Deep link 配置


RN下面Android平台下的DeepLink 的配置与使用

AndroidManifest.xml的配置

路径: android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.payment">
  <uses-permission android:name="android.permission.INTERNET" />
  <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
    <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
        <!-- autoVerify 需要网页配置文件配合来达到浏览器打开app效果 -->
      <intent-filter android:autoVerify="true">      
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
      <!-- 下面这个配置项是用于配置路由,注意schema 那个data, -->
      <!-- 10.0.2.2 对应的是windows 机器,在android emulator中,我们的开发机器就是这个ip,相当于localhost -->
      <!-- 配置了三个路由 myPayment://10.0.2.2:8245/xxx -->
      <!-- https://10.0.2.2:8246/xxx -->
      <!-- http://10.0.2.2:8245/xxx -->
      <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="myPayment"/>
        <data android:scheme="https" android:host="10.0.2.2:8246"/>
        <data android:scheme="http" android:host="10.0.2.2:8245"/>
      </intent-filter>
    </activity>
  </application>
</manifest>

由于开启了android:autoVerify=”true”,需要一个站点来提供app的签名认证,完整链接,

具体步骤如下:

  • keytool -list -v -keystore ./android/app/debug.keystore 产生app的签名,注意其中的SHA256这个hash。./android/app/debug.keystore,这个路径是相对于项目目录而言的。这个里面有个坑,需要密码。密码是android,
  • copy 其中的 SHA256签名,放入assetlinks.json 文件中,内容如下;如果copy下面文件,记得删除注释。
[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.payment",  // 这个是你app的名字,android/app/build.gradle 中的defaultConfig, applicationId
    "sha256_cert_fingerprints":
    ["FA:C6:17:45:DC:09:03:78:6F:B9:ED:E6:2A:96:2B:39:9F:73:48:F0:BB:6F:89:9B:83:32:66:75:91:03:3B:9C"]  // 这个第一步中的SHA256
  }
}]
  • 建立一个web 站点 域名为http://localhost:8245 https://localhost:8246, 在http://localhost:8245/.well-know/assetlinks.json 放置第二步的配置项。

定义linking 来响应接受上面配置的路由参数,完整链接

代码示例

const config = {
  screens: {
    approval_setting: 'setting',// key screen 名字,value: 我们需要的路由,例如: http://10.0.2.2:8245/setting 将对应approval_setting screen
    my_approvals: 'myapprovals',
    submit_invoice: 'invoice',
  }
};
const linking = {
  prefixes: ['myPayment://10.0.2.2:8245', 'http://10.0.2.2:8245','https://10.0.2.2:8246'],
  config,
};

function App(){
  return (
    <NavigationContainer linking={linking}>
        xxx
    </NavigationContainer>
  )
}

小插曲,我一开始直接在浏览器中输入url: http://10.0.2.2:8245/setting,发现不起作用,实际上需要开发者工具,推荐 uri-schema这个npm 包,
直接运行npx uri-schema open "http://10.0.2.2:8245/setting" --android就可以打开这个app.

原创文章,作者:745907710,如若转载,请注明出处:https://blog.ytso.com/273044.html

(0)
上一篇 2022年7月9日
下一篇 2022年7月9日

相关推荐

发表回复

登录后才能评论