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.x
vớ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:
- 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:
- 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:
- 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.properties
và thêm các dòng sau:
- android.useAndroidX = true
- 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 WebView
thà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 [
];
}
}
Ở đây, chúng ta đã xác định MyInlineWeb
thà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 WebView
phần có nội dung HTML
được định cấu hình để source
hỗ 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 uri
tùy chọn cho phần source
hỗ trợ của WebView
thà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ừ WebView
thà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
ActivityIndicator
thà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 ActiviIndicator
thà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ề ActivityIndicator
như đượ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