Hướng dẫn html view react-native

Trong React Native, WebViews cho phép truy cập vào bất kỳ cổng web nào trong chính ứng dụng dành cho thiết bị di động. Nói cách khác, chế độ xem web cho phép chúng tôi mở các URL web bên trong giao diện ứng dụng. Mặc dù React Native cung cấp cho chúng ta thành phần xem web được tích hợp sẵn, nhưng chúng ta sẽ sử dụng plugin react-native-webview trong hướng dẫn này, vì nó mạnh hơn. React Native WebView là một WebView hiện đại, được hỗ trợ tốt và đa nền tảng cho React Native.

Webview tích hợp sẵn từ React Native sẽ sớm không được dùng nữa dựa trên tài liệu này . Do đó, plugin này đóng vai trò thay thế cho chế độ xem web tích hợp sẵn. Plugin này là một plugin của bên thứ ba được hỗ trợ bởi cộng đồng react-native.

Yêu cầu

Các yêu cầu để làm theo hướng dẫn này là:

  • Nodejs >=8.x.xvới npm hoặc sợi được cài đặt làm trình quản lý gói.
  • watchman một dịch vụ xem tập tin.
  • react-native-cli .

Bắt đầu với React Native WebView

Để bắt đầu với cấu hình chế độ xem web, trước tiên chúng ta cần cài đặt plugin thực tế. Ở đây, chúng tôi đang sử dụng sợi để cài đặt plugin nhưng chúng tôi cũng có thể sử dụng NPM (Trình quản lý gói nút). Do đó, để cài đặt plugin, chúng ta cần chạy lệnh sau trong dấu nhắc lệnh của thư mục dự án của chúng ta:

  1. sợi thêm react-native-webview

Nếu phiên bản gốc phản ứng bằng hoặc lớn hơn 0,60 thì quá trình cài đặt cũng sẽ tự động liên kết plugin với các cấu hình gốc. Tuy nhiên, trong trường hợp của các phiên bản trước đó, chúng tôi có thể cần phải chạy:

  1. react-native link react-native-webview

iOS

Trong trường hợp của iOS, chúng ta cũng cần chạy lệnh sau:

  1. cài đặt pod

Android

Trong trường hợp của Android, mô-đun này không yêu cầu thêm bất kỳ bước nào sau khi chạy lệnh liên kết. Nhưng đối với phiên bản react-native-webview> = 6.XX, chúng tôi cần đảm bảo AndroidX được bật trong dự án của chúng tôi. Điều này có thể được thực hiện bằng cách chỉnh sửa android/gradle.propertiesvà thêm các dòng sau:

  1. android.useAndroidX = true
  2. android.enableJetifier = true

Điều này hoàn thành các bước cài đặt của chúng tôi. Bây giờ chúng tôi có thể sử dụng plugin trong dự án gốc phản ứng của chúng tôi.

Tải HTML nội tuyến bằng React Native WebView

Đầu tiên, chúng tôi sẽ tải một nội dung HTML đơn giản vào giao diện ứng dụng của chúng tôi. Để làm được điều đó, chúng tôi cần thêm các lần nhập sau vào tệp App.js của chúng tôi :

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

Ở đây, chúng tôi đã nhập WebViewthành phần từ plugin react-native-webview . Bây giờ, chúng ta có thể sử dụng thành phần này để tải nội dung HTML như được hiển thị trong đoạn mã bên dưới:

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
  render() {
    return (
      This is a static HTML source!' }}
      />
    );
  }
}

Ở đây, chúng ta đã xác định MyInlineWebthành phần lớp. Thành phần lớp này có một render()chức năng hiển thị WebView thành phần. Thành WebViewphần có nội dung HTML được định cấu hình để sourcehỗ trợ nó . Do đó, chúng ta có thể thấy nội dung HTML được hiển thị trong giao diện ứng dụng như được hiển thị trong ảnh chụp màn hình trình giả lập bên dưới:

Đang tải URL từ xa

Bây giờ, thay vì nội dung HTML đơn giản, chúng tôi sẽ tải toàn bộ nội dung trang web từ URL từ xa. Đối với điều đó, chúng tôi cần cung cấp uritùy chọn cho phần sourcehỗ trợ của WebViewthành phần như được hiển thị trong đoạn mã bên dưới:

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

class MyWeb extends Component {
  render() {
    return ;
  }
}

Do đó, chúng tôi sẽ nhận được toàn bộ trang web của trang web được mở trong chính chế độ xem web của ứng dụng như được hiển thị trong ảnh chụp màn hình bên dưới:

Thêm một Loading Spinner vào React Native Webview

Trong khi truy cập URL từ WebViewthành phần, có thể mất một khoảng thời gian để tải toàn bộ nội dung HTML trên trang web. Vì vậy, để biểu thị độ trễ, chúng tôi sẽ hiển thị chỉ báo tải cho đến khi trang web tải. Đối với điều này, chúng tôi cần nhập ActivityIndicatorthành phần từ gói gốc phản ứng như được hiển thị trong đoạn mã bên dưới:

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

Bây giờ, chúng ta cần sử dụng ActiviIndicatorthành phần trong dự án của mình. Đối với điều đó, chúng tôi sẽ tạo một hàm được gọi là hàm LoadingIndicatorView()này sẽ trả về ActivityIndicatornhư được hiển thị trong đoạn mã bên dưới:

import * as React from 'react';
import { Text, View, StyleSheet,ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';

import { Card } from 'react-native-paper';
 function LoadingIndicatorView() {
    return 
} export default function App() { return ( ); }

Ở đây, chúng tôi đã sử dụng AcitivityIndicatorvới colorvà các sizeđạo cụ. Sau đó, chúng ta đã gọi LoadingIndicatorViewhàm vào chỗ dựa renderLoadingcủa WebViewthành phần. Điều này cho phép chúng tôi hiển thị chỉ báo tải cho đến khi trang web tải hoàn toàn. Chúng ta có thể thấy rằng startInLoadingStateprop cũng được sử dụng ở đây. Giá trị boolean này buộc WebViewhiển thị chế độ xem đang tải trên lần tải đầu tiên. Giá đỡ này phải được đặt để truechân renderLoadingchống hoạt động.
Do đó, chúng tôi nhận được kết quả sau trong mô phỏng giả lập của chúng tôi:

Phần kết luận

Trong hướng dẫn này, chúng ta đã tìm hiểu về thuộc tính chế độ xem web của React Native. Vì tính năng xem web tích hợp của React Native sẽ không được dùng nữa, chúng tôi đã học cách sử dụng plugin chế độ xem web của bên thứ ba có tên là react-native-webview . Đầu tiên, chúng ta đã học cách hiển thị nội dung HTML đơn giản bằng cách sử dụng thành phần WebView. Sau đó, chúng tôi có giải thích chi tiết về cách sử dụng thành phần WebView và các đạo cụ của nó để hiển thị toàn bộ nội dung HTML từ URL cùng với chỉ báo tải. Trong trường hợp bạn muốn tìm hiểu thêm, bạn có thể đi tới  kho lưu trữ chính để thảo luận về plugin chế độ xem web này.

4 hữu ích 0 bình luận 15k xem chia sẻ