React native链接到另一个应用程序 [英] React native Linking to another app

问题描述

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

I am trying to link to another app from my react native application (google maps for example).

我需要链接模块，如下所示： https://facebook.github.io/react-native/docs/linking.html

I required the Linking module as it's written here: https://facebook.github.io/react-native/docs/linking.html

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

My code contains a simple button which should open the navigation app and pass some location as properties:

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

加载视图后，我没有收到任何错误，这意味着要求模块正常工作。

Upon loading the view I get no errors which implicates that requiring the module worked fine.

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

Upon taping the button I get the following error message :

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

---

我已按照以下步骤操作： https：//facebook.github。 io / react-native / docs / linking-libraries-ios.html 并安装 npm install link --save < - 也许问题是这是错误的模块？如果是错误的，有人知道如何调用正确的吗？

---

I have followed these steps : https://facebook.github.io/react-native/docs/linking-libraries-ios.html and installed npm install link --save <- Maybe the issue is that this is the wrong module?? If it is the wrong one does anyone know how the correct one is called?

推荐答案

你不需要 npm install link --save 或使用在iOS中链接库指南。 < Linking /> 组件和链接图书馆行动是两回事。

You do not need to npm install link --save or to use the "Linking Libraries in iOS" guide. The "<Linking /> component" and the "Linking librairies action" are two very different things.

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

<Linking /> is a component that allows you to open links (web urls, or links to other apps) and to detect when your app is called from a link (from a browser or another app, or a push notification for example). It is a core component of React Native and comes with the react-native npm package.

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

Linking librairies is necessary when you install a third party library (like react-native-maps for example) and you need to add the dependencies to your iOS Xcode and Android Gradle build configurations. It is usually done with the react-native link <package> command, after you npm install it.

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

The only thing you must do is require or import <Linking /> in your javascript file before using it. You do not even need the whole part about Handling deep links from the documentation. That is only for incoming links that open your app. All you need starts at Opening external links

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

Now, why your code fails is a mystery. Here is a link to a working app that has the exact same behavior. A concise example would be:

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文件夹并执行<$ c再次$ c> npm install ，并将您的项目编译为新的。

I suggest cleaning your project, removing the node_modules folder and doing npm install again, and compiling your project new.

这篇关于React native链接到另一个应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！