Appleの審査結果の中で、外部ブラウザを呼び出している場合にSafari Viewの使用を勧められることがあります。 これは、iOSのアプリ上でSafariと同様の挙動が行えるモジュールです。 今回はReactNativeアプリでSafariViewを使う方法をご紹介します。
react-native@0.63今回はreact-native-safari-viewを使います。
SafariViewはiOS9以降で利用可能です。yarn add react-native-safari-view
cd ios && pod install使用方法はSafariViewのshow()で表示したいWebページのURLを指定するだけです。
import React, { Component } from "react";
import { View, Button } from "react-native"
import SafariView from "react-native-safari-view";
class SafariViewSample extends Component {
constructor(props) {
super(props);
}
handlePressButton = () => {
// isAvailable()でSafariViewが利用可能かチェック
SafariView.isAvailable()
.then(SafariView.show({
// urlに表示させたいURLを指定
url: "https://www.google.com/"
}))
.catch(error => {
// エラー処理
// iOS8以前などのSafariViewを利用できないOSは
// ここでメッセージを表示する等で対応します。
console.log("Safari View not available");
});
}
render = () => {
return (
<View>
<Button title="Open Safari View" onPress={this.handlePressButton} />
</View>
);
}
}react-native-webviewとの違い外部のWEBページを表示させるライブラリとしてはreact-native-webviewというものが有名です。
あちらとの最大の違いは、コンポーネントであるか否かだと思います。
react-native-safari-viewがボタンを押す等の関数の実行結果としてSafariView.show()を実行した結果SafariViewが表示されるのに対して、react-native-webviewはWebViewというコンポーネントをrenderの中に組み込んで描画します。
言い換えると、react-native-webviewはreactのライフサイクルの中に組み込むことができます。
またreact-native-webviewにはinjectJavaScriptやpostMessageといったプロパティが用意されており、「WebViewの中で特定のボタンを押した際のイベントをアプリで拾わせる」のようにアプリとWEBページの挙動を連動させることができます。
react-native-safari-viewには今のところ(2020/10/07現在)そういった機能は用意されていないので、SafariViewで入力した結果をアプリで直接受け取るということは基本的にできません。
今回はSafariViewをreact-native製アプリで使用するためのライブラリであるreact-native-safari-viewを紹介しました。
有名どころだとreact-native-webviewを使うかもしれませんが、iOSに限定すればこういったライブラリもあるため、使い分けだと思います。