React Native 下面Android 下的Deep link 配置


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

AndroidManifest.xml的配置

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


  
  
    
        
            
        
        
      
      
      
      
      
      
      
        
        
        
        
        
        
      
    
  

由于开启了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 (
    
        xxx
    
  )
}

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