React Native - 解析 URL 以获取查询变量答案

【问题标题】：React Native - Parse URL to get Query VariableReact Native - 解析 URL 以获取查询变量
【发布时间】：2021-03-18 07:03:57
【问题描述】：

寻找一种方法来解析 URL 以获取从 Linking 接收的 React Native 中的查询变量。

我收到的 URL 类似于：

url-app-scheme://somePage?someVar=someVal

我想从 URL 中获取 someVar 值。

有什么想法吗？

【问题讨论】：

标签： react-native

【解决方案1】：

这应该可以解决问题

var url = "http://example.com?myVar=test&otherVariable=someData&number=123"

var regex = /[?&]([^=#]+)=([^&#]*)/g,
  params = {},
  match;
while (match = regex.exec(url)) {
  params[match[1]] = match[2];
}
console.log(params)

【讨论】：

如果有人想解释，请看这个参考，也感谢@Ray，ref=https://www.jskap.com/blog/React-Native-parse-url-query-params/
但是如果你传递参数=your_url_with_character_#_hash，这将不起作用，我将 url 作为包含# 的参数传递，它在那里不起作用。
你也能稍微解释一下吗？

【解决方案2】：

有一个URL class in JavaScript 旨在让您能够健壮地构建和解析 URL，使查询参数易于访问：

const url = new URL('url-app-scheme://somePage?someVar=someVal');
url.searchParams.get('someVar')

遗憾的是，URL 在 React Native 中的实现并不完整and has some known bugs。幸运的是，有一个名为 react-native-url-polyfill 的可靠 polyfill 库，它提供了 URL 的实现，它的表现和测试都很好 - 我强烈推荐它。

【讨论】：

【解决方案3】：

您可以从 JS 生态系统中利用一些方法来做到这一点。试试 URI.js https://github.com/medialize/URI.js

【讨论】：

【解决方案4】：

使用查询字符串来工作

yarn add  query-string

import queryString from 'query-string';

const parsed = queryString.parseUrl("https://pokeapi.co/api/v2/pokemon?offset=10&limit=10");
console.log(parsed.offset) will display 10

【讨论】：

【解决方案5】：

试试网址https://www.npmjs.com/package/url

“该模块具有用于 URL 解析和解析的实用程序，旨在与 node.js 核心 url 模块具有相同的功能。”

节点 URL 对象在使用 Chrome react-native 调试器时可用于您的应用程序，但在不受限制时在您的 iPhone 上不可用。

所以使用这个包

npm install url

示例代码：

import url from 'url';

...

let urlObject = url.parse(inUrlString);
let outUrlString = urlObject.protocol + '//' + urlObject.host + '/more/jump?jump_path=' + encodeURIComponent(urlObject.pathname);

【讨论】：

你能告诉我，如何使用这个模块提取 url-params，我看到它是 github 文档，但无法弄清楚，url="example.com/path/?id=1"？

【解决方案6】：

url="example.com/path/?id=1"
let urlObject = url.parse(url, true); // second parameter `true` (parse search query)
console.log(urlObject.query['id']); // 1

【讨论】：

欢迎来到 Stack Overflow！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。

【解决方案7】：

更新：这不是上述问题的解决方案，因为除非处于调试模式，否则它不起作用。但是，我没有删除此答案，因为我认为它指出了值得注意的细微差别。

React Native（使用版本 0.46）支持 JavaScript 自己的 URL Web API。您可以使用 to 轻松解析或构建 url 的任何部分。

API 与WHATWG API of the URL module in Node.js 相同，这个答案确实应该更明显，但它很容易因为可用的好 url 解析包的数量而迷失。

编辑：由于某种原因，这仅在 JS 调试模式下有效，否则无效。所以这个解决方案并不真正有效，但我把它留在这里是因为我很想知道如何让相同的 URL 模块与 react-native 一起使用。

【讨论】：

这可能是因为它来自您的浏览器而不是本机反应。太糟糕了:(
当你打开“Remote JS Debugging”时，你的代码将在浏览器而不是你的设备中运行。 Chrome 使用 V8，RN 使用 JavaScriptCore，因此您会遇到这样的差异。您可以在这里获取更多信息：facebook.github.io/react-native/docs/…
@AlicanC 感谢您在评论中阐明了这种行为背后的原因。