如何在 React Native 中打开应用内浏览器窗口？答案

【问题标题】：How do I open in-app browser window in React native?如何在 React Native 中打开应用内浏览器窗口？
【发布时间】：2017-08-06 15:54:25
【问题描述】：

当我点击 URL 时，我试图在不离开应用程序的情况下打开浏览器窗口（适用于 iOS 和 Android）。

行为应该如下（以airbnb app为例）：

点击“条款和条件”链接：links example
在应用内打开浏览器：
对于 iOS：in-app browser iOS
Android 也是如此。

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

我正在使用 react-native 0.37。

【问题讨论】：

标签： react-native react-redux react-native-android react-native-ios

【解决方案1】：

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

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

另一方面，您可以将此插件与深度链接一起使用，请查看项目的 README。

【讨论】：

如何使用 onNavigationStateChange 之类的东西来控制它，它可用于简单的 webview？
直接使用 React Native 的 Linking
就我而言，我尝试了亚马逊支付页面。在android中，它在webview需要时打开新标签。但在IOS中，它不允许打开新标签。所以登录后页面只显示一个空白页面:(！我暂时使用了 deep-linking * 和 *react-native-custom-tabs
@Johncy 哦，我明白了，它受到 Safari 服务的限制 :(
@jdnichollsc 我可以看到 iOS 中的应用内浏览器在一些应用（如 airtel、bookmyshow 等）中执行相同的支付网关。仍然无法理解如何在 iOS 上实现这一点:(如果有人有想法请发表您的建议

【解决方案2】：

打开 Safa 模块方法

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

在 Android CustomTabs 3rd 方原生模块 - 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}}
      />
    );
  }
}

【讨论】：

我已经尝试过了，但不是示例中显示的本机视图。还是谢谢。
@FacundoBazzana 查看更新。我找到了ios和android的解决方案。
WebView 在 react-native 包中不再可用 :(
此网页视图不会处理深层链接。当您单击 web 视图中的任何链接或按钮时，它会将其重定向到本机浏览器。我们不能像 iframe 一样在 webview 中运行整个网站。

【解决方案3】：

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

平台

【讨论】：

【解决方案4】：

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

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

【讨论】：