设为首页 - 加入收藏 固原站长网 (http://www.0954zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 模式 升级
当前位置: 首页 > ag亚游游戏|首页 > 评论 > 正文

在iOS 与Android上实现React Native应用的尝试链接

发布时间:2019-08-19 22:18 所属栏目:[评论] 来源:魑魅魍魉
导读:我们生活在一个万物兼可分享的年代,而分享的过程,几乎最终都会分享某一个链接,那么,作为开发者,最常遇到的问题中应该包括如何通过一个URL地址快速的打开App,并导航至特定的页面。 什么是深度链接(Deep Link) 深度链接是一项可以让一个App通过一个URL

我们生活在一个万物兼可分享的年代,而分享的过程,几乎最终都会分享某一个链接,那么,作为开发者,最常遇到的问题中应该包括如何通过一个URL地址快速的打开App,并导航至特定的页面。

在iOS 与Android上实现React Native应用的尝试链接

什么是深度链接(Deep Link)

深度链接是一项可以让一个App通过一个URL地址打开,之后导航至特定页面或者资源,或者展示特定UI的技术,Deep 的意思是指被打开的页面或者资源并不是App的首页,最常使用到的地方包括但远远不限于 Push Notification、邮件、网页链接等。

其实这个技术在很久很久以前就已经存在了,鼠标点击一下 mailto:pantao@parcmg.com 这样的链接,系统会打开默认的邮件软件,然后将 pantao@parcmg.com 这个邮箱填写至收件人输入栏里,这就是深度链接。

本文将从零开始创建一个应用,让它支持通过一个如 deep-linking://articles/{ID} 这样的 URL 打开 文章详情 页面,同时加载 {ID} 指定的文章,比如:deep-linking://articles/4 将打开 ID 为 4 的文章详情页面。

深度链接解决了什么问题?

网页链接是无法打开原生应用的,如果一个用户访问你的网页中的某一个资源,他的手机上面也已经安装了你的应用,那么,我们要如何让系统自动的打开应用,然后在应用中展示用户所访问的那一个页面中的资源?这就是深度链接需要解决的问题。

实现深度链接的不同方式

有两种方式可以实现深度链接:

  • URL scheme
  • Universal links

前端是最常见的方式,后者是 iOS 新提供的方式,可以一个普通的网页地址链接至App的特定资源。

本文将创建一个名为 DeepLinkingExample 的应用,使得用户可以通过打开 deep-linking://home 以及 deep-linking://articles/4 分别打开 App 的首页以及 App 中 ID 为 4 的文章详情页面。

  1. react-native?init?DeepLinkingExample?
  2. cd?DeepLinkingExample?

安装必要的库

紧跟 TypeScript 大潮流,我们的 App 写将使用 TypeScript 开发。

  1. yarn?add?react-navigation?react-native-gesture-handler?
  2. react-native?link?react-native-gesture-handler?

我们将使用 react-navigation 模块作为 App 的导航库。

添加 TypeScript 相关的开发依赖:

  1. yarn?add?typescript?tslint?tslint-react?tslint-config-airbnb?tslint-config-prettier?ts-jest?react-native-typescript-transformer?-D?
  2. yarn?add?@types/jest?@types/node?@types/react?@types/react-native?@types/react-navigation?@types/react-test-renderer?

添加 tsconfig.json:

  1. {?
  2. ??"compilerOptions":?{?
  3. ????"target":?"es2017",???????????????????????/*?Specify?ECMAScript?target?version:?'ES3'?(default),?'ES5',?'ES2015',?'ES2016',?'ES2017',?or?'ESNEXT'.?*/?
  4. ????"module":?"es2015",???????????????????????/*?Specify?module?code?generation:?'none',?'commonjs',?'amd',?'system',?'umd',?'es2015',?or?'ESNext'.?*/?
  5. ????"lib":?[??????????????????????????????????/*?Specify?library?files?to?be?included?in?the?compilation:??*/?
  6. ??????"es2017",?
  7. ??????"dom"?
  8. ????],?
  9. ????"resolveJsonModule":?true,?
  10. ????"allowJs":?false,?????????????????????????/*?Allow?javascript?files?to?be?compiled.?*/?
  11. ????"skipLibCheck":?true,?????????????????????/*?Skip?type?checking?of?all?declaration?files.?*/?
  12. ????"jsx":?"react-native",????????????????????/*?Specify?JSX?code?generation:?'preserve',?'react-native',?or?'react'.?*/?
  13. ????"declaration":?true,??????????????????????/*?Generates?corresponding?'.d.ts'?file.?*/?
  14. ????"sourceMap":?true,????????????????????????/*?Generates?corresponding?'.map'?file.?*/?
  15. ????"outDir":?"./lib",????????????????????????/*?Redirect?output?structure?to?the?directory.?*/?
  16. ????"removeComments":?true,???????????????????/*?Do?not?emit?comments?to?output.?*/?
  17. ????"noEmit":?true,???????????????????????????/*?Do?not?emit?outputs.?*/?
  18. ?
  19. ????/*?Strict?Type-Checking?Options?*/?
  20. ????"strict":?true,???????????????????????????/*?Enable?all?strict?type-checking?options.?*/?
  21. ????"noImplicitAny":?true,????????????????????/*?Raise?error?on?expressions?and?declarations?with?an?implied?'any'?type.?*/?
  22. ????"strictNullChecks":?true,?????????????????/*?Enable?strict?null?checks.?*/?
  23. ????"strictFunctionTypes":?true,??????????????/*?Enable?strict?checking?of?function?types.?*/?
  24. ????"noImplicitThis":?true,???????????????????/*?Raise?error?on?'this'?expressions?with?an?implied?'any'?type.?*/?
  25. ????"alwaysStrict":?true,?????????????????????/*?Parse?in?strict?mode?and?emit?"use?strict"?for?each?source?file.?*/?
  26. ?
  27. ????/*?Additional?Checks?*/?
  28. ????"noUnusedLocals":?true,???????????????????/*?Report?errors?on?unused?locals.?*/?
  29. ????"noUnusedParameters":?true,???????????????/*?Report?errors?on?unused?parameters.?*/?
  30. ????"noImplicitReturns":?true,????????????????/*?Report?error?when?not?all?code?paths?in?function?return?a?value.?*/?
  31. ????"noFallthroughCasesInSwitch":?true,???????/*?Report?errors?for?fallthrough?cases?in?switch?statement.?*/?
  32. ?
  33. ????/*?Module?Resolution?Options?*/?
  34. ????"moduleResolution":?"node",???????????????/*?Specify?module?resolution?strategy:?'node'?(Node.js)?or?'classic'?(TypeScript?pre-1.6).?*/?
  35. ????"baseUrl":?"./",??????????????????????????/*?Base?directory?to?resolve?non-absolute?module?names.?*/?
  36. ????"paths":?{????????????????????????????????/*?A?series?of?entries?which?re-map?imports?to?lookup?locations?relative?to?the?'baseUrl'.?*/?
  37. ??????"*":?[?
  38. ????????"*.android",?
  39. ????????"*.ios",?
  40. ????????"*.native",?
  41. ????????"*.web",?
  42. ????????"*"?
  43. ??????]?
  44. ????},?
  45. ????"typeRoots":?[????????????????????????????/*?List?of?folders?to?include?type?definitions?from.?*/?
  46. ??????"@types",?
  47. ??????"../../@types"?
  48. ????],?
  49. ????//?"types":?[],???????????????????????????/*?Type?declaration?files?to?be?included?in?compilation.?*/?
  50. ????"allowSyntheticDefaultImports":?true,?????/*?Allow?default?imports?from?modules?with?no?default?export.?This?does?not?affect?code?emit,?just?typechecking.?*/?
  51. ????//?"preserveSymlinks":?true,??????????????/*?Do?not?resolve?the?real?path?of?symlinks.?*/?
  52. ?
  53. ????/*?Experimental?Options?*/?
  54. ????"experimentalDecorators":?true,???????????/*?Enables?experimental?support?for?ES7?decorators.?*/?
  55. ????"emitDecoratorMetadata":?true?????????????/*?Enables?experimental?support?for?emitting?type?metadata?for?decorators.?*/?
  56. ??},?
  57. ??"exclude":?[?
  58. ????"node_modules",?
  59. ????"web"?
  60. ??]?
  61. }?

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章