使用 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)
• 世博帳號

第 1 步：初始化一個新的 Expo 項目

首先，使用 Expo CLI 建立一個新的 Expo 專案。

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

步驟2：安裝React Native WebView

安裝react-native-webview套件，它提供了WebView元件。

expo install react-native-webview

第三步：建立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;

第四步：自訂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 套用掃描二維碼即可查看正在執行的 WebView。

額外的定制

• 導航手勢：在 WebView 元件中使用 allowedBackForwardNavigationGestures={true} 啟用 iOS 導航手勢。
• 檔案下載：使用 onFileDownload 屬性處理檔案下載，並使用 expo-file-system 和 expo-sharing 套件來儲存檔案。
• 外部連結：使用expo-web-browser在系統瀏覽器中開啟外部連結。

資源

• 世博文獻【10†來源】
• React Native WebView 文件【9†來源】
• LogRocket React Native WebView 指南【8†來源】

透過執行以下步驟，您可以使用 Expo 在 React Native 中建立功能齊全的 WebView 應用程序，並具有處理各種與 Web 相關的功能和自訂的功能。

以上是使用 Expo 在 React Native 中建立 WebView 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！