反应原生链接到另一个应用程序

Question

我正在尝试从我的 react 本机应用程序（例如谷歌地图）链接到另一个应用程序。

我需要链接模块，因为它写在这里：https://facebook.github.io/react-native/docs/linking.html

我的代码包含一个简单的按钮，它应该打开导航应用程序并将一些位置作为属性传递：

<TouchableOpacity 
   onPress={ () =>{
     Linking.openURL("http://maps.google.com/maps=daddr=Wien")
     .catch(err => console.error('An error occurred', err)); }}
>
   <Text>Navigate</Text>
</TouchableOpacity>

加载视图后，我没有收到任何错误，这表明需要该模块才能正常工作。

点击按钮后，我收到以下错误消息：

undefined is not an object (evaluating '_reactNative.Linking.openURL')

---

我已按照以下步骤操作：https://facebook.github.io/react-native/docs/linking-libraries-ios.html 并安装了npm install link --save

Answer 1

您不需要npm install link --save 或使用“Linking Libraries in iOS”指南。 “<Linking /> 组件”和“链接库操作”是两个截然不同的东西。

<Linking /> 是一个组件，允许您打开链接（Web url，或指向其他应用程序的链接）并检测何时从链接（从浏览器或其他应用程序）调用您的应用程序，或例如推送通知）。它是 React Native 的核心组件，附带 react-native npm 包。

链接库 在您安装第三方库（例如 react-native-maps）时是必需的，并且您需要将依赖项添加到您的 iOS Xcode 和 Android Gradle 构建配置中。它通常在您npm install 之后使用react-native link <package> 命令完成。

您必须做的唯一一件事就是在使用之前在您的 javascript 文件中要求或导入 <Linking />。您甚至不需要文档中关于处理深层链接的全部内容。这仅适用于打开您的应用程序的传入链接。你所需要的一切从Opening external links开始

现在，您的代码失败的原因是个谜。这是指向具有完全相同行为的工作应用程序的链接。一个简洁的例子是：

import React from 'react';
import { TouchableOpacity, Linking, Text } from 'react-native';

export default function Button() {
  return (
    <TouchableOpacity onPress={() => Linking.openURL('https://maps.google.com?q=stack+overflow+offices')}>
      <Text>Press me</Text>
    </TouchableOpacity>
  );
}

您也可以在rnplay 上进行测试。

我建议清理您的项目，删除 node_modules 文件夹并再次执行npm install，然后重新编译您的项目。