如何在React native中打开应用程序内浏览器窗口

Question

当我点击网址（适用于iOS和Android）时，我正在尝试打开浏览器窗口而不会离开应用。

行为应如下（使用airbnb app示例）：

• 点击“条款和条件”链接：links example
• 在应用内打开浏览器：
  • 适用于iOS：in-app browser iOS
  • Android相同。

我该怎么做？我是否需要使用任何指定的现有库？

我正在使用react-native 0.37，顺便说一句。

感谢。

Answer 1

打开Safa模块方法

在iOS SafariView第三方原生模块 - https://github.com/naoufal/react-native-safari-view

上

在Android CustomTabs第三方原生模块 - https://github.com/droibit/react-native-custom-tabs上 - 但如果用户未安装Chrome，则会在默认浏览器中弹出应用外部的链接。

替代WebView方法

您可以使用<WebView>，但这不是使用真正的浏览器 - 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}}
      />
    );
  }
}

Answer 2

您可以使用新的InAppBrowser plugin for React Native，请查看下一个示例：

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

另一方面，您可以将此插件用于深层链接，检查项目的自述文件。

Answer 3

使用React Native Custom Tabs在React native中打开应用内浏览器窗口。它支持平台 Android 和 iOS

Answer 4

您可以使用React Native In-App Browser Reborn。它可以在Android和iOS上完美运行。

此库在iOS上使用react-native-safari-view（SafariView），在Android上使用react-native-custom-tabs（ChromeView）。

Answer 5

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

我已在应用浏览器插件中使用过，但在我的情况下，打开对话框以显示设备安装浏览器以打开url，但是我需要在react native页面中打开我的url