Expo を使用して React Native で WebView アプリを作成する-jsチュートリアル-php.cn

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

王林

リリース： 2024-07-18 04:57:09

オリジナル

457 人が閲覧しました

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

Image description

詳細:- 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 を使用してシステムのブラウザで外部リンクを開きます。