📖

利用規約をwebViewで表示する

2024/02/09に公開

背景

利用規約をS3で公開したが、それをアプリでアクセスできるように実装していく必要がある。

実装方法

  • react-native-webviewライブラリを導入する

  • コンポーネントは下記のように表示できる

import React from 'react';
import { WebView } from 'react-native-webview';

const WebViewScreen = ({ route }) => {
  const { uri } = route.params;
  
  return <WebView source={{ uri }} />;
};

export default WebViewScreen;

問題点

  • s3の静的ホスティングを公開する際に、cloudfrontなどやSSL証明書を発行しなかった。
    →それを表示させようとすると、下記のようになってしまう。

調べてみるとどうやら、httpではなくhttpsのリンクを用意するように言われた。
検証のために、「https://google.com」などを開くと問題なく表示された。

  • WebViewは画面端まで表示されてしまうので、余白を設けた方がいいかもしれません。

課題

  • S3の静的ホスティングをSSL証明書を用意し、cloudfrontを経由してhttpsで公開する必要がある。

Discussion