Öffnen Sie die URL im Standard-Webbrowser

90

Ich bin neu in React-Native und möchte die URL in einem Standardbrowser wie Chrome in Android und iPhone öffnen .

Wir öffnen URL über Absicht in Android genauso wie Funktionalität, die ich erreichen möchte.

Ich habe viele Male gesucht, aber es wird mir das Ergebnis von Deepklinking geben .

android ios react-native Mohit Suthar
quelle

Antworten:

212

Sie sollten verwenden Linking.

Beispiel aus den Dokumenten:

class OpenURLButton extends React.Component {
  static propTypes = { url: React.PropTypes.string };
  handleClick = () => {
    Linking.canOpenURL(this.props.url).then(supported => {
      if (supported) {
        Linking.openURL(this.props.url);
      } else {
        console.log("Don't know how to open URI: " + this.props.url);
      }
    });
  };
  render() {
    return (
      <TouchableOpacity onPress={this.handleClick}>
        {" "}
        <View style={styles.button}>
          {" "}<Text style={styles.text}>Open {this.props.url}</Text>{" "}
        </View>
        {" "}
      </TouchableOpacity>
    );
  }
}

Hier ist ein Beispiel, das Sie mit Expo Snack ausprobieren können :

import React, { Component } from 'react';
import { View, StyleSheet, Button, Linking } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <Button title="Click me" onPress={ ()=>{ Linking.openURL('https://google.com')}} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});
RRikesh
quelle
@RajKumarN, wie würde dies funktionieren, wenn Sie eine App haben, die Nachrichtenartikel erfasst und die Hyperlinks der Nachrichtenartikel in einem separaten Browser öffnen möchten?
Daniel
Überprüfen Sie dies, facebook.github.io/react-native/docs/… . Dies kann hilfreich sein @ Daniel
Raj Kumar N
@RajKumarN Wie können wir die externe URL in der App öffnen, ohne zum Browser umzuleiten?
LazyCoder
9

Ein einfacherer Weg, bei dem nicht überprüft werden muss, ob die App die URL öffnen kann.

  loadInBrowser = () => {
    Linking.openURL(this.state.url).catch(err => console.error("Couldn't load page", err));
  };

Mit einem Knopf aufrufen.

<Button title="Open in Browser" onPress={this.loadInBrowser} />
KUPPLER
quelle
1
Wie gehe ich mit Nullwerten um? Angenommen, ich erhalte eine URL vom Backend, die jedoch anstelle einer Zeichenfolge null zurückgibt. Die App stürzt ab.
ASN
2
@ASN Sie führen diese Überprüfung durch, bevor Sie diese URL an die openURLMethode übergeben. Zum Beispiel : If (this.state.url) Linking.openURL(this.state.url). Sie können die catch-Klausel auch verwenden, wenn Sie sie nicht vorher überprüfen möchten.
CLUTCHER
1
Ja, so habe ich damit umgegangen. Vielen Dank :)
ASN
Hallo! Nur eine Frage: Was schlagen Sie für Android vor, wenn die App standardmäßig zum Öffnen ausgewählt ist und ich denselben Link nur im Browser öffnen muss?
Andriy Khlopyk
einfache, kurze, nützliche Lösung, können Sie kommentieren, zeigt leeren Bildschirm, wenn ich manuell vom Browser zur App zurückkomme.
Ganeshdeshmukh
1

In React 16.8+ würden Sie Funktionskomponenten verwenden

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

const ExternalLinkBtn = (props) => {
  return <Button
            title={props.title}
            onPress={() => {
                Linking.openURL(props.url)
                .catch(err => {
                    console.error("Failed opening page because: ", err)
                    alert('Failed to open page')
                })}}
          />
}

export default function exampleUse() {
  return (
    <View>
      <ExternalLinkBtn title="Example Link" url="https://example.com" />
    </View>
  )
}
wp-overwatch.com
quelle