react native 配置 ios universal link.

开发react native 中出现一个之前没碰到过的需求，那就是浏览公司的网站页面的时候可以点击链接跳转到app里面去。如何才能实现这个需求呢， 你需要以下几个条件

1. ios developer 账号

2. https 服务器，之前想看看本地的https 服务器行不行， 结果是不行。也就是说测试的网站的服务器必须是https的。

第一步准备好一个不带任何后缀的文本文件， 文件名字是 ’apple-app-site-association‘ 。 文本的内容如下

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "8NL2H3YTL7.org.reactjs.native.example.dummpAppJacky",
                "paths": [ "/download" ]
            }
        ] 
    }
}

这里有个两个东西需要配置
一个是appID
如果你是app用的是开发者账号的话，打开 https://developer.apple.com/account/ios/identifier/bundle。
选择你当前的app 就能看到你app 的prefix 和 ID.
那这个appleID， 就是prefix + id 的组合了。 ‘ 8NL2H3YTL7’ 是prefix
‘org.reactjs.native.example.dummpAppJacky’ 就是id 了。

WechatIMG44807.jpeg

第二个就是‘paths’了
这个path 就是说你网站的什么页面可以打开app. 我这边配置的是download页面可以打开。也就是说 假设我的网站是 https://www.example.com, 那么在手机的safari访问https://www.example.com/download 就会弹出是否打开app的弹窗了。 也可以用通配符来配置 ，这里就不做介绍了。
配置好这个文件之后， 下面这个步骤很重要. 你需要把这个文件上传到你的https的服务器上面，只要是你的网站请求 ‘/apple-app-site-association’能够正确下载到这个文件，那就可以。 也就是说 https://www.example.com/apple-app-site-association 如果能够下载到上传的文件， 那就ok了。 这个文件是提供给app 下载的， 他需要跟我们的https 服务器沟通，读取配置，文件能正确下载， 里面的appID 能对应的上的时候， 我们的app才算是正确的hook 上了。

第二步需要用xcode 配置app了， 首先用xcode 打开项目， 然后在capabilities 里面把Associated Domains 打开， 然后设置添加一个domians.
如果说你的网站地址是https://example.com , 那就在dominas 里面添加一个
applinks:example.com。

WechatIMG44817.jpeg

当上面的都配置好了之后，就可以把app 打包 安装到手机上了。
接下来就是测试了， 这里还有一个问题， 那就是跨域的问题。
上面我们配置的规则是当我们用safari打开https://www.example.com/download
的时候，app可以被拉起，但前提是， 你当前不能在https://www.example.com/ 这个域名下。 什么意思呢， 如果你是在 https://www.exmaple.com/account 这个页面下， 点击 https://www.exmaple.com/download 是无法唤起app的， 因为是同一个域名， 如果是当前是在 https://subdomain.exmaple.com，或者是https://www.otherexample.com 下面的话，点击链接https://www.exmaple.com/download ， 那么app 才能被唤起。这是ios 的一个坑。

接下来是就是唤起之后， apple 如何处理这个跳转了， 贴一段别人的代码

componentDidMount(){
    // this handles the case where the app is closed and is launched via Universal Linking.
    Linking.getInitialURL()
        .then((url) => {
          if (url) {
            // Alert.alert('GET INIT URL','initial url  ' + url)
            this.resetStackToProperRoute(url)
          }
        })
        .catch((e) => {})

   // This listener handles the case where the app is woken up from the Universal or Deep Linking
   Linking.addEventListener('url', this.appWokeUp);
  }

  componentWillUnmount(){
    // Remove the listener
    Linking.removeEventListener('url', this.appWokeUp);
  }

  appWokeUp = (event) => {
    // this handles the use case where the app is running in the background and is activated by the listener...
    // Alert.alert('Linking Listener','url  ' + event.url)
    this.resetStackToProperRoute(event.url)
  }

  resetStackToProperRoute = (url) => {
    // Do Whatever you need to do within your app to redirect users to the proper route
  }

在 react native 的最外面一层的component 可以获取到那个url 了。