1. ติดตั้ง React Native WebView

ให้ติดตั้งไลบรารีในโปรเจกต์ React Native ของคุณ:

npm install --save react-native-webview

หมายเหตุ:

• หากใช้ React Native เวอร์ชัน 0.60 ขึ้นไป ระบบจะจัดการ Auto-linking โดยอัตโนมัติ
• สำหรับ React Native เวอร์ชันต่ำกว่า 0.60 คุณต้องใช้คำสั่ง react-native link

2. การตั้งค่าเพิ่มเติมสำหรับ Android

การกำหนดค่า AndroidManifest.xml

• เปิดไฟล์ android/app/src/main/AndroidManifest.xml
• เพิ่มสิทธิ์การใช้งานอินเทอร์เน็ต (ถ้ายังไม่มี):

<uses-permission android:name="android.permission.INTERNET" />

การตั้งค่า Min SDK

• ตรวจสอบว่าค่า minSdkVersion ใน android/build.gradle เป็น 21 หรือสูงกว่า:

defaultConfig {

    minSdkVersion = 21

}

3. การตั้งค่าเพิ่มเติมสำหรับ iOS

ติดตั้ง Pod Dependencies

หลังจากติดตั้ง WebView ให้รันคำสั่งในโฟลเดอร์ iOS:

cd ios

pod install

การตั้งค่า Info.plist

• เปิดไฟล์ ios/ชื่อโปรเจกต์/Info.plist
• เพิ่มการตั้งค่าเพื่ออนุญาตการโหลดเนื้อหาภายนอก:

<key>NSAppTransportSecurity</key>

<dict>

    <key>NSAllowsArbitraryLoads</key>

    <true/>

</dict>

4. โค้ดตัวอย่างสำหรับ Android และ iOS

โค้ดด้านล่างสามารถใช้งานได้ทั้งสองแพลตฟอร์ม:

import React from 'react';

import { StyleSheet, View, ActivityIndicator } from 'react-native';

import { WebView } from 'react-native-webview';

const MyWebView = () => {

  const LoadingIndicatorView = () => (

    <ActivityIndicator

      color="#00ff00"

      size="large"

      style={styles.loadingIndicator}

    />

  );

  return (

    <View style={styles.container}>

      <WebView

        source={{ uri: 'https://www.matumweb.com/' }}

        startInLoadingState={true} // แสดง Loader ขณะกำลังโหลด

        renderLoading={LoadingIndicatorView}

        javaScriptEnabled={true} // เปิดใช้งาน JavaScript

        domStorageEnabled={true} // เปิดใช้งาน DOM Storage

      />

    </View>

  );

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

  },

  loadingIndicator: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

  },

});

export default MyWebView;

5. การทำงานร่วมกับ JavaScript

คุณสามารถสื่อสารระหว่าง WebView กับ Native Code ได้โดยใช้ Props อย่าง onMessage และ injectedJavaScript:

<WebView

  source={{ uri: 'https://www.example.com/' }}

  javaScriptEnabled={true}

  injectedJavaScript={`window.ReactNativeWebView.postMessage("Hello from WebView!");`}

  onMessage={(event) => {

    alert(event.nativeEvent.data); // รับข้อความจาก WebView

  }}

/>

6. การปรับแต่งเพิ่มเติมสำหรับ Android และ iOS

เปิดลิงก์ภายนอกในเบราว์เซอร์ (Android/iOS)

หากต้องการเปิดลิงก์ภายนอกในเบราว์เซอร์ของอุปกรณ์แทน WebView:

import { Linking } from 'react-native';

<WebView

  source={{ uri: 'https://www.matumweb.com/' }}

  onShouldStartLoadWithRequest={(request) => {

    if (!request.url.startsWith('https://www.matumweb.com')) {

      Linking.openURL(request.url); // เปิดลิงก์ภายนอกในเบราว์เซอร์

      return false;

    }

    return true;

  }}

/>

สรุป

• โค้ดที่ให้มาทำงานได้ทั้ง Android และ iOS โดยไม่ต้องแก้ไขเพิ่ม
• หากต้องการการปรับแต่งเพิ่มเติม เช่น การจัดการลิงก์ หรือตั้งค่าความปลอดภัย คุณสามารถเพิ่ม Props และปรับแต่งได้ตามต้องการ