摘要

掌握 React Native 中的 HTML 渲染對於提升應用程式的使用體驗至關重要，本文提供了實用的開發者指南。 歸納要點:

• 安全性優先:使用 `react-native-webview-safe` 和 `react-native-secure-webview` 等套件,能有效防範跨站腳本攻擊等安全漏洞,確保 WebView 環境的安全。
• 性能優化:選擇高效能渲染套件如 `react-native-render-html`,可將 HTML 內容轉換為原生元件,提高渲染速度並減少資源消耗。
• 動態 HTML 處理:利用 `react-native-render-html` 的功能,開發者可以在渲染前動態修改 HTML 內容,以滿足電子商務或新聞網站的需求。

在 React Native 應用程式中渲染 HTML 內容的最佳實務

npm install react-native-webview

yarn add react-native-webview

npx react-native link react-native-webview

expo install react-native-webview

import React from 'react'; import {WebView} from 'react-native-webview'; import {SafeAreaView} from 'react-native';  const HtmlContent = () => {   // HTML content to be displayed in the WebView   const htmlContent = `                                                     
Hello World!
         
This is an example of rendering HTML content in React Native using WebView.
         Click here                        `;    // JavaScript code to be injected into the WebView   const runJavaScript = `     document.body.style.backgroundColor = 'lightblue'; // Change background color     true; // Required for Android to signal that the script has finished   `;    return (             {           // Update canGoBack state based on WebView's navigation state            // Log the URL of the page being navigated to (excluding data URLs)           if (!event.url.startsWith('data:text/html')) {             console.log('Navigating to:', event.url);             // Handle link navigation logic if needed           }         }}         source={{html: htmlContent}} // Set the HTML content for the WebView         style={{flex: 1}} // Make the WebView fill its container       />        ); };  export default HtmlContent;

 {     if (!event.url.startsWith('data:text/html')) {       console.log('Navigating to:', event.url);       // Handle link navigation logic     }   }}   style={{ flex: 1 }} />

const runJavaScript = `   document.body.style.backgroundColor = 'lightblue';   true; // required for Android to signal that the script has finished `;  

import React, { useRef, useState, useEffect } from 'react'; import { WebView } from 'react-native-webview'; import { BackHandler, SafeAreaView, Alert } from 'react-native';  const HtmlContent = () => {   const webViewRef = useRef(null);   const [canGoBack, setCanGoBack] = useState(false);   const htmlContent = `                     
Hello World!
         
This is an example of rendering HTML content in React Native using WebView.
         Go to Google               `;   // Function to handle the back button press on Android   const handleBackPress = () => {     if (canGoBack && webViewRef.current) {       webViewRef.current.goBack(); // Go back to the previous page in WebView       return true; // Prevent the default back action (app exit)     } else {       Alert.alert('Exit App', 'Do you want to exit?', [         { text: 'No', onPress: () => null, style: 'cancel' }, // Cancel action         { text: 'Yes', onPress: () => BackHandler.exitApp() }, // Exit action       ]);       return true; // Prevent the default back action     }   };   // Listen to the back button press on Android   useEffect(() => {     BackHandler.addEventListener('hardwareBackPress', handleBackPress);     // Cleanup event listener on component unmount     return () => BackHandler.removeEventListener('hardwareBackPress', handleBackPress);   }, [canGoBack]);   return (             {           setCanGoBack(event.canGoBack); // Update canGoBack state based on WebView's navigation state         }}         style={{ flex: 1 }}       />        ); }; export default HtmlContent;

使用 WebView 在 React Native 應用程式中渲染 HTML 內容：回退機制、安全性和最佳化