Buka Url di browser web default

Saya baru dalam react-native dan saya ingin membuka url di browser default seperti Chrome di Android dan iPhone keduanya.

Kami membuka url melalui maksud di Android sama seperti fungsionalitas yang ingin saya capai.

Saya telah melakukan pencarian berkali-kali tetapi itu akan memberi saya hasil Deepklinking .

android ios react-native

— Mohit Suthar
sumber

Jawaban:

212

Anda harus menggunakan Linking.

Contoh dari dokumen:

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>
    );
  }
}

Berikut contoh yang bisa Anda coba di Expo Snack :

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
sumber

@RajKumarN, bagaimana cara kerjanya jika Anda memiliki aplikasi yang mengambil artikel berita dan Anda ingin membuka hyperlink artikel berita di browser terpisah?

— Daniel

Lihat ini, facebook.github.io/react-native/docs/… . Ini dapat membantu @Daniel

— Raj Kumar N

@RajKumarN Bagaimana kita bisa membuka URL eksternal di dalam aplikasi tidak mengarahkan ke browser?

— LazyCoder

Cara lebih sederhana yang menghilangkan pemeriksaan apakah aplikasi dapat membuka url.

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

Memanggilnya dengan sebuah tombol.

<Button title="Open in Browser" onPress={this.loadInBrowser} />

— CLUTCHER
sumber

Bagaimana cara menangani nilai null? katakanlah saya menerima URL dari backend tetapi mengembalikan null alih-alih string, aplikasi mogok.

— ASN

@ ASN Anda melakukan pemeriksaan itu sebelum meneruskan url itu ke openURLmetode. Sebagai contoh: If (this.state.url) Linking.openURL(this.state.url). Anda juga dapat menggunakan klausa catch jika Anda tidak ingin memeriksa sebelumnya.

— CLUTCHER

Ya begitulah cara saya menanganinya. Terima kasih :)

— ASN

Hai! Hanya sebuah pertanyaan, Apa yang Anda sarankan untuk dilakukan untuk android jika aplikasi dipilih untuk dibuka secara default dan saya perlu membuka tautan yang sama tetapi di browser?

— Andriy Khlopyk

solusi sederhana, singkat, berguna, dapatkah Anda berkomentar tentang itu menunjukkan layar kosong ketika saya kembali secara manual dari browser ke aplikasi.

— ganeshdeshmukh

Di React 16.8+, menggunakan komponen fungsional, Anda akan melakukannya

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
sumber