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. Show 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ầuCác yêu cầu để làm theo hướng dẫn này là:
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:
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:
iOSTrong trường hợp của iOS, chúng ta cũng cần chạy lệnh sau:
AndroidTrong 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
Đ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 :
Ở đây, chúng tôi đã nhập
Ở đây, chúng ta đã xác định Đang tải URL từ xaBâ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
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 WebviewTrong khi truy cập URL từ
Bây giờ, chúng ta cần sử dụng
Ở đây, chúng tôi đã sử dụng Phần kết luậnTrong 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ẻ |