Wie zu öffnen in-app-browser-Fenster, in Reagieren nativen

Ich versuche, öffnen Sie das browser-Fenster, ohne die app wenn ich auf eine URL (für iOS und Android).

Verhalten sollte wie folgt sein (mit airbnb app Beispiel):

Wie kann ich dies tun? Brauche ich alle angegebenen vorhandenen Bibliothek?

Ich bin mit reagieren-native 0.37, btw.

Dank.

InformationsquelleAutor Facundo Bazzana | 2017-08-06
  1. 5

    Öffnet Safa Modul-Methode

    Auf iOS SafariView 3rd-party-native-Modul - https://github.com/naoufal/react-native-safari-view

    Auf Android CustomTabs 3rd-party-native-Modul - https://github.com/droibit/react-native-custom-tabs - aber wenn der Benutzer nicht über Chrome installiert, wird es pop öffnen Sie den link außerhalb Ihrer app in Ihrem Standard-browser.

    Alternative Methode WebView

    Können Sie eine <WebView> aber dies ist nicht mit der real-browser - http://facebook.github.io/react-native/releases/0.47/docs/webview.html#webview

    import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://github.com/facebook/react-native'}}
        style={{marginTop: 20}}
      />
    );
  }
}
    • Ich habe dies bereits versucht, ist aber nicht die native Ansicht, wie im Beispiel gezeigt. Trotzdem danke.
    • check-out-update. Ich fand ios-und android-Lösung.
    InformationsquelleAutor Noitidart
  2. 5

    Können Sie mit der neuen InAppBrowser-plugin für Reagieren Nativen, überprüfen Sie die nächste Beispiel:

    JS:

    import InAppBrowser from 'react-native-inappbrowser-reborn';

...
  async openLink() {
    try {
      await InAppBrowser.isAvailable()
      InAppBrowser.open('https://www.google.com', {
        //iOS Properties
        dismissButtonStyle: 'cancel',
        preferredBarTintColor: 'gray',
        preferredControlTintColor: 'white',
        //Android Properties
        showTitle: true,
        toolbarColor: '#6200EE',
        secondaryToolbarColor: 'black',
        enableUrlBarHiding: true,
        enableDefaultShare: true,
        forceCloseOnRedirection: true,
      }).then((result) => {
        Alert.alert(JSON.stringify(result))
      })
    } catch (error) {
      Alert.alert(error.message)
    }
  }
...

    Auf der anderen Seite, Sie können dieses plugin mit deep-linking, überprüfen Sie die README-Datei des Projekts.

    • Wie kann ich dies Steuern, mit so etwas wie onNavigationStateChange, die für eine einfache webview?
    • Mit Verlinkung zu Reagieren Nativen direkt
    • In meinem Fall, ich habe versucht, für Amazon payment page. In android, sein öffnen von neuen tabs, wenn der webview muss.Aber in IOS, die es nicht erlauben, zu öffnen von neuen tabs. So nach loggedin die Seite zeigt nur eine leere Seite:(! Vorübergehend habe ich verwendet, deep-linking * und *reagieren-native-custom-tabs
    • oh ich verstehe, es ist begrenzt durch Safari Services 🙁
    • ich kann sehen, dass in-app-Browser in iOS zu tun die gleichen Zahlungs-gateway in einigen apps wie airtel, bookmyshow etc..bin Noch nicht in der Lage zu verstehen, wie zu erreichen, dass auf iOS 🙁 Wenn jemand mit Ahnung bitte posten Sie Ihre suggession
    • bitte posten Sie Ihre Frage aus dem repo 🙂 github.com/proyecto26/react-native-inappbrowser/issues

    InformationsquelleAutor jdnichollsc
  3. 3

    Verwenden Reagieren Nativen Benutzerdefinierten Registerkarten zu öffnen, in-app-browser-Fenster, in Reagieren nativen. Es unterstützt sowohl die Plattform Android und iOS

    InformationsquelleAutor Pir Shukarullah Shah
  4. 1

    Können Sie Reagieren Native In-App-Browser Wiedergeboren. Es funktioniert perfekt auf Android und iOS.

    Diese Bibliothek verwenden react-native-safari-view (SafariView) auf iOS und react-native-custom-tabs (ChromeView) auf Android.

    InformationsquelleAutor d2luu
Schreibe einen Kommentar