React native链接到另一个应用程序

Question

我试图从我的反应原生应用程序链接到另一个应用程序(例如谷歌地图).

我需要链接模块,因为它写在这里: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或使用" 在iOS中链接库 "指南." <Linking />组件"和"链接图书馆行动"是两个截然不同的事情.

<Linking />是一个组件,允许您打开链接(Web URL或其他应用程序的链接),并检测从链接(从浏览器或其他应用程序,或推送通知)调用您的应用程序的时间.它是React Native的核心组件,带有react-native npm包.

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

您必须做的唯一事情是<Linking />在使用之前要求或导入您的javascript文件.您甚至不需要从文档中处理深层链接的整个部分.这仅适用于打开您的应用的传入链接.您只需从打开外部链接开始

现在,为什么你的代码失败是一个谜.这是一个具有完全相同行为的工作应用程序的链接.一个简明的例子是:

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再次执行,并将项目编译为新的.