web-dev-qa-db-fra.com

Comment ouvrir la fenêtre du navigateur dans l'application en React native

J'essaie d'ouvrir la fenêtre du navigateur sans quitter l'application lorsque je clique sur une URL (pour iOS et Android).

Le comportement doit être le suivant (avec l'exemple d'application airbnb):

Comment puis-je faire ceci? Dois-je utiliser une bibliothèque existante spécifiée?

J'utilise 0.37 réactif natif, btw.

Merci.

react-nativereact-reduxreact-native-androidreact-native-ios
7
Facundo Bazzana

Vous pouvez utiliser le nouveau plugin InAppBrowser pour React Native , vérifiez l'exemple suivant:

import { Linking } from 'react-native'
import InAppBrowser from 'react-native-inappbrowser-reborn';

...
  async openLink() {
    try {
      const isAvailable = await InAppBrowser.isAvailable()
      const url = 'https://www.google.com'
      if (isAvailable) {
        InAppBrowser.open(url, {
          // 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))
        })
      } else Linking.openURL(url)
    } catch (error) {
      Alert.alert(error.message)
    }
  }
...

D'autre part, vous pouvez utiliser ce plugin avec des liens profonds, vérifiez le README du projet.

7
jdnichollsc

Ouvre la méthode du module Safa

Sur iOS SafariView Module natif tiers - https://github.com/naoufal/react-native-safari-view

Sur Android CustomTabs Module natif tiers - https://github.com/droibit/react-native-custom-tabs - cependant si le l'utilisateur n'a pas Chrome installé, il ouvrira le lien en dehors de votre application dans son navigateur par défaut.

Autre méthode WebView

Vous pouvez utiliser un <WebView> mais cela n'utilise pas le vrai navigateur - 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}}
      />
    );
  }
}
5
Noitidart

Utilisez React Native Custom Tabs pour ouvrir la fenêtre du navigateur dans l'application en React native. Il prend en charge les deux plates-formes Android et iOS

3
Pir Shukarullah Shah

Vous pouvez utiliser React Native In-App Browser Reborn . Il fonctionne parfaitement sur les deux Android et iOS.

Cette bibliothèque utilise react-native-safari-view (SafariView) sur iOS et react-native-custom-tabs (ChromeView) sur Android.

2
d2luu