Expo を使用して React Native で WebView アプリを作成する

Expo を使用して React Native で WebView アプリを作成するのは簡単なプロセスです。以下は、インストール、WebView の設定、アプリの構築など、これを実現する方法に関するステップバイステップのガイドです。

詳細:- https://codexdindia.blogspot.com/2024/07/creating-webview-app-in-react-native.html

前提条件

• JavaScript と React の基礎知識
• システムにインストールされている Node.js と npm
• Expo CLI をグローバルにインストール (npm install -g expo-cli)
• Expo アカウント

ステップ 1: 新しい Expo プロジェクトを初期化する

まず、Expo CLI を使用して新しい Expo プロジェクトを作成します。

npx create-expo-app WebViewApp --template blank
cd WebViewApp

ステップ 2: React Native WebView をインストールする

WebView コンポーネントを提供する React-native-webview パッケージをインストールします。

expo install react-native-webview

ステップ 3: WebView コンポーネントを作成する

WebView を処理する新しいコンポーネントを作成します。 App.js を開き、その内容を次のコードに置き換えます:

import React from 'react';
import { SafeAreaView, StyleSheet, Platform, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <WebView
        source={{ uri: 'https://www.example.com' }}
        startInLoadingState={true}
        renderLoading={() => <ActivityIndicator color='blue' size='large' />}
        style={{ marginTop: Platform.OS === 'ios' ? 20 : 0 }}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

ステップ 4: WebView をカスタマイズする

WebView をさらにカスタマイズして、ナビゲーション ジェスチャの処理、スプラッシュ スクリーンの表示、ファイルのダウンロードの処理などの機能を追加できます。

スプラッシュスクリーンの表示

WebView のロード中にスプラッシュ スクリーンを表示するには、Expo Splash Screen パッケージをインストールします。

expo install expo-splash-screen

次に、スプ​​ラッシュ スクリーンを使用するように App.js を変更します。

import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, Platform, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

const App = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!loading) {
      SplashScreen.hideAsync();
    }
  }, [loading]);

  return (
    <SafeAreaView style={styles.container}>
      <WebView
        source={{ uri: 'https://www.example.com' }}
        onLoadEnd={() => setLoading(false)}
        startInLoadingState={true}
        renderLoading={() => <ActivityIndicator color='blue' size='large' />}
        style={{ marginTop: Platform.OS === 'ios' ? 20 : 0 }}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

ステップ 5: アプリを構築して実行する

物理デバイス上でアプリを構築して実行するには、次のコマンドを使用します:

expo start

デバイスの Expo Go アプリで QR コードをスキャンして、WebView の動作を確認します。

追加のカスタマイズ

• ナビゲーション ジェスチャー: WebView コンポーネントで allowedBackForwardNavigationGestures={true} を使用して iOS ナビゲーション ジェスチャーを有効にします。
• ファイルのダウンロード: onFileDownload プロパティでファイルのダウンロードを処理し、ファイルの保存には expo-file-system および expo-sharing パッケージを使用します。
• 外部リンク: expo-web-browser を使用してシステムのブラウザで外部リンクを開きます。

リソース

• Expo ドキュメント【10†出典】
• React Native WebView ドキ​​ュメント【9†出典】
• React Native WebView に関する LogRocket ガイド【8†出典】

これらの手順に従うことで、Expo を使用して React Native で完全に機能する WebView アプリを作成できます。このアプリには、Web 関連のさまざまな機能やカスタマイズを処理する機能が含まれます。

以上がExpo を使用して React Native で WebView アプリを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。