web-dev-qa-db-ja.com

アプリ内ブラウザウィンドウをReact nativeで開く方法

URLをクリックすると、アプリを離れずにブラウザウィンドウを開こうとしています（iOSとAndroidの両方）。

動作は次のようになります（airbnbアプリの例を使用）：

これどうやってするの？指定した既存のライブラリを使用する必要がありますか？

私は反応ネイティブ0.37を使用しています。

ありがとう。

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

新しい InAppBrowserプラグイン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を確認してください。

7
jdnichollsc

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}}
      />
    );
  }
}
5
Noitidart

React Native Custom Tabs を使用して、アプリ内ブラウザウィンドウをReact native。両方のプラットフォームをサポートしますAndroidおよびiOS

3
Pir Shukarullah Shah

React Native In-App Browser Reborn を使用できます。 AndroidとiOSの両方で完全に動作します。

このライブラリはreact-native-safari-view（SafariView）iOSおよびreact-native-custom-tabs（ChromeView）on Android。

2
d2luu