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

Question

当我点击一个URL（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）。