使用 Expo 在 React Native 中建立 WebView 應用程式是一個簡單的過程。以下是有關如何實現此目標的逐步指南,包括安裝、設定 WebView 和建置應用程式。
了解更多:- https://codexdindia.blogspot.com/2024/07/creating-webview-app-in-react-native.html
首先,使用 Expo CLI 建立一個新的 Expo 專案。
npx create-expo-app WebViewApp --template blank cd WebViewApp
安裝react-native-webview套件,它提供了WebView元件。
expo install react-native-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 載入時顯示啟動畫面,請安裝 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;
要在實體設備上建置並運行您的應用程序,請使用以下命令:
expo start
使用裝置上的 Expo Go 套用掃描二維碼即可查看正在執行的 WebView。
透過執行以下步驟,您可以使用 Expo 在 React Native 中建立功能齊全的 WebView 應用程序,並具有處理各種與 Web 相關的功能和自訂的功能。
以上是使用 Expo 在 React Native 中建立 WebView 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章!