URL'yi varsayılan web tarayıcısında aç

Yeni in yerli-tepki ve i açık istediğiniz url içinde Android ve iPhone Chrome gibi varsayılan tarayıcı hem.

Url'yi, elde etmek istediğim işlevsellikle aynı Android'de niyet aracılığıyla açıyoruz.

Birçok kez arama yaptım ama bana Deepklinking'in sonucunu verecek .

android ios react-native

— Mohit Suthar
kaynak

Yanıtlar:

217

Kullanmalısınız Linking.

Dokümanlardan örnek:

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

İşte Expo Snack'te deneyebileceğiniz bir örnek :

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
kaynak

@RajKumarN, haber makalelerini toplayan bir uygulamanız varsa ve haber makalelerinin köprülerini ayrı bir tarayıcıda açmak istiyorsanız bu nasıl çalışır?

— Daniel

Şuna bakın , facebook.github.io/react-native/docs/… . Bu yardımcı olabilir @Daniel

— Raj Kumar N

@RajKumarN Tarayıcıya yönlendirmeden uygulama içindeki harici URL'yi nasıl açabiliriz?

— LazyCoder

Uygulamanın url'yi açıp açamadığını kontrol etmeyi ortadan kaldıran daha basit bir yol.

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

Bir düğmeyle çağırmak.

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

— KAVRAMA
kaynak

Boş değerleri nasıl işlerim? diyelim ki arka uçtan URL alıyorum ama bir dize yerine boş döndürdü, uygulama kilitleniyor.

— ASN

@ASN Bu url'yi openURLyönteme geçmeden önce bu kontrolü yaparsınız . Örneğin: If (this.state.url) Linking.openURL(this.state.url). Önceden kontrol etmek istemiyorsanız, catch cümlesini de kullanabilirsiniz.

— CLUTCHER

Evet ben de öyle hallettim. Teşekkür ederim :)

— ASN

Selam! Sadece bir soru, uygulama varsayılan olarak açılmak üzere seçildiyse ve aynı bağlantıyı ancak tarayıcıda açmam gerekiyorsa android için ne yapmamı önerirsiniz?

— Andriy Khlopyk

basit, kısa, kullanışlı bir çözüm, tarayıcıdan uygulamaya manuel olarak geri döndüğümde boş ekran gösteriyor.

— ganeshdeshmukh

React 16.8+ sürümünde, fonksiyonel bileşenleri kullanarak

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
kaynak