react-native-applinks, AppLinks对本机响应的支持

分享于 

4分钟阅读

GitHub

  繁體 雙語
AppLinks support for React Native.
  • 源代码名称:react-native-applinks
  • 源代码网址:http://www.github.com/facebook/react-native-applinks
  • react-native-applinks源代码文档
  • react-native-applinks源代码下载
  • Git URL:
    git://www.github.com/facebook/react-native-applinks.git
    Git Clone代码到本地:
    git clone http://www.github.com/facebook/react-native-applinks
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/facebook/react-native-applinks
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    本地应用程序链接

    响应本机应用程序链接是一个用于响应原生插件的JavaScript库,它实现应用程序链接协议,帮助你链接到其他应用程序并处理传入的深层链接。

    应用链接协议文档可以在 applinks.org: 应用链接导航协议

    示例

    处理传入的deeplink

    
    
    
    
    var React = require('react-native');
    
    
    var { LinkingIOS } = React;
    
    
    var AppLinkURL = require('react-native-applinks').AppLinkURL;
    
    
    
    var MyApp = React.createClass({
    
    
     componentDidMount: function() {
    
    
     LinkingIOS.addEventListener('url', this._handleOpenURL);
    
    
     var url = LinkingIOS.popInitialURL();
    
    
     if (url) { this._handleOpenURL({url: url}); }
    
    
     },
    
    
     componentWillUnmount: function() {
    
    
     LinkingIOS.removeEventListener('url', this._handleOpenURL);
    
    
     },
    
    
     _handleOpenURL: function(event) {
    
    
     var alUrl = new AppLinkURL(event.url)
    
    
     // work with alUrl.appLinkData. For example render back link to referer app.
    
    
     var backLink = null;
    
    
     var refererAL = alUrl.appLink.referer_app_link;
    
    
    
     // if referer app link was provided we can construct back button with text
    
    
     if (refererAL) {
    
    
     backLink = {
    
    
     url: refererAL.url,
    
    
     text: 'Back' + refererAL.app_name ? ' to ' + refererAL.app_name : ''
    
    
     };
    
    
     }
    
    
     }
    
    
    }
    
    
    
    

    处理传出链接

    要从 web url获取应用程序链接数据,你需要使用AppLinkNavigation和AppLinkResolver类。 响应本地应用程序链接库提供了两种AppLinkResolver实现:

    • IndexAPIAppLinkResolver - 通过查询 facebook API的索引获取应用程序链接数据。 在查找应用程序链接数据与索引 API 更多。
    • NativeAppLinkResolver - 下载和解析给定网址的html内容。 扫描':'元标记并创建应用程序链接对象。
    
    
    
    
    var React = require('react-native');
    
    
    var { LinkingIOS } = React;
    
    
    var AppLinks = require('react-native-applinks');
    
    
    var { AppLinkNavigation, IndexAPIAppLinkResolver, NativeAppLinkResolver } = AppLinks;
    
    
    
    var MyApp = React.createClass({
    
    
     _openOutgoingWebUrl(weburl) {
    
    
     var fbResolver = new IndexAPIAppLinkResolver('your_app_facebook_token');
    
    
     // var nativeResolver = new NativeAppLinkResolver();
    
    
     var alNavigation = new AppLinkNavigation(
    
    
     fbResolver, // nativeResolver,
    
    
     { target_url: 'http://myapp.com', url: 'myapp://home', app_name: 'My App' },
    
    
     'iphone'
    
    
     );
    
    
     // fetch best possible deeplink from web url's app link data and open using LinkingIOS
    
    
     alNavigation.fetchUrlFromWebUrl(weburl, LinkingIOS.openURL, (err) => { /* handle error */ });
    
    
     }
    
    
    
    

    要求

    响应本机应用程序链接需要或者使用

    • 响应本机

    安装响应本机应用程序链接

    安装 react-native-applinks

    许可证

    响应本地应用程序链接是bsd许可。 我们还提供额外的专利授权。


    SUP  react  NAT  Native  React Native  Applinks  
    相关文章