Mencipta apl WebView dalam React Native menggunakan Expo

Mencipta apl WebView dalam React Native menggunakan Expo ialah proses yang mudah. Di bawah ialah panduan langkah demi langkah tentang cara mencapai matlamat ini, termasuk pemasangan, menyediakan WebView dan membina apl.

Ketahui Lebih Lanjut :- https://codexdindia.blogspot.com/2024/07/creating-webview-app-in-react-native.html

Prasyarat

• Pengetahuan asas JavaScript dan React
• Node.js dan npm dipasang pada sistem anda
• Expo CLI dipasang secara global (npm install -g expo-cli)
• Akaun Ekspo

Langkah 1: Mulakan Projek Ekspo Baharu

Mula-mula, buat projek Ekspo baharu menggunakan Expo CLI.

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

Langkah 2: Pasang React Native WebView

Pasang pakej react-native-webview, yang menyediakan komponen WebView.

expo install react-native-webview

Langkah 3: Buat Komponen WebView

Buat komponen baharu untuk mengendalikan WebView. Buka App.js dan gantikan kandungannya dengan kod berikut:

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;

Langkah 4: Sesuaikan WebView

Anda boleh menyesuaikan WebView selanjutnya untuk menambah lebih banyak fungsi, seperti mengendalikan gerak isyarat navigasi, menunjukkan skrin percikan atau mengendalikan muat turun fail.

Menunjukkan Skrin Percikan

Untuk menunjukkan skrin percikan semasa WebView dimuatkan, pasang pakej Expo Splash Screen.

expo install expo-splash-screen

Kemudian, ubah suai App.js untuk menggunakan skrin percikan:

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;

Langkah 5: Bina dan Jalankan Apl Anda

Untuk membina dan menjalankan apl anda pada peranti fizikal, gunakan arahan berikut:

expo start

Imbas kod QR dengan apl Expo Go pada peranti anda untuk melihat WebView anda sedang beraksi.

Penyesuaian Tambahan

• Gerak Isyarat Navigasi: Dayakan gerak isyarat navigasi iOS dengan allowBackForwardNavigationGestures={true} dalam komponen WebView.
• Muat Turun Fail: Kendalikan muat turun fail dengan prop onFileDownload dan gunakan sistem fail ekspo dan pakej perkongsian ekspo untuk menyimpan fail.
• Pautan Luaran: Buka pautan luaran dalam penyemak imbas sistem menggunakan pelayar web ekspo.

Sumber

• Dokumentasi Ekspo【10†sumber】
• React Native WebView Documentation【9†source】
• Panduan LogRocket tentang React Native WebView【8†source】

Dengan mengikut langkah ini, anda boleh mencipta apl WebView berfungsi sepenuhnya dalam React Native menggunakan Expo, dengan keupayaan untuk mengendalikan pelbagai fungsi dan penyesuaian berkaitan web.

Atas ialah kandungan terperinci Mencipta apl WebView dalam React Native menggunakan Expo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!