Hướng dẫn how load local html file in react native webview? - cách tải tệp html cục bộ trong webview gốc phản ứng?

Nội dung

• 1 phản ứng WebView bản địa React Native WebView
• 2 nhiệm vụ Tasks
  • 2.1 1. Tải trang web từ URL 1. Loading of WebPage from URL
  • 2.2 2. Tải trang HTML từ một biến với chuỗi HTML 2. Load HTML Page from a variable with HTML String
  • 2.3 3. Tải tệp HTML cục bộ 3. Load a Local HTML File
• 3 để tạo một ứng dụng tự nhiên phản ứng To Make a React Native App
• 4 Cài đặt phụ thuộc Installation of Dependency
• 5 Cài đặt ca cao CocoaPods Installation
• 6 cấu trúc tập tin dự án Project File Structure
• 7 mã Code
  • 7.1 app.js App.js
• 8 để chạy ứng dụng & nbsp; React gốc To Run the React Native App
• 9 ảnh chụp màn hình đầu ra Output Screenshots
  • 9.1 iOS IOS
  • 9.2 Android Android

Tải tệp HTML cục bộ hoặc URL trong React Native bằng cách sử dụng React-I-WebView là bài đăng được cập nhật và kết hợp của 2 bài đăng cuối cùng của chúng tôi & NBSP; Mở bất kỳ trang web nào trong React Native WebView và & NBSP; React Load Nove Location HTML File trong WebView.

Trong ví dụ này, chúng tôi sẽ sử dụng & nbsp; thành phần

Hello' }}
  style={{ marginTop: 20 }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
/>

Nhiệm vụ

Các nhiệm vụ khác nhau & nbsp; mà bạn có thể thấy trong ví dụ này là:

1. Tải trang web từ URL

2. Tải trang HTML từ một biến với chuỗi HTML

Hello' }}
  style={{ marginTop: 20 }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
/>

3. Tải tệp HTML cục bộ

if(isAndroid){
  return (
      
  )
}else{
  return(
    
  );
}

Để tạo một ứng dụng tự nhiên phản ứng

Bắt đầu với React Native sẽ giúp bạn biết thêm về cách bạn có thể thực hiện một dự án bản địa phản ứng. Chúng tôi sẽ sử dụng init-bản địa phản ứng để tạo ứng dụng gốc phản ứng của chúng tôi. Giả sử rằng bạn đã cài đặt nút, bạn có thể sử dụng NPM để cài đặt tiện ích dòng lệnh

Hello' }}
  style={{ marginTop: 20 }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
/>

npm install -g react-native-cli

Chạy các lệnh sau để tạo một dự án gốc React mới

react-native init ProjectName

Nếu bạn muốn bắt đầu một dự án mới với một phiên bản gốc React, bạn có thể sử dụng đối số -sự thay đổi:

react-native init ProjectName --version X.XX.X

react-native init ProjectName --version react-native@next

Điều này sẽ tạo cấu trúc dự án với một tệp chỉ mục có tên App.js trong thư mục dự án của bạn.

Cài đặt phụ thuộc

Để sử dụng ________ 14 & nbsp; bạn cần cài đặt

Hello' }}
  style={{ marginTop: 20 }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
/>

cd ProjectName

Chạy các lệnh sau

npm install react-native-webview --save

Lệnh này sẽ sao chép sự phụ thuộc vào thư mục node_module của bạn. CấmSave là tùy chọn, nó chỉ để cập nhật phụ thuộc trong tệp pack.json của bạn.

Cài đặt ca cao

Sau khi cập nhật phản ứng gốc 0,60, họ đã giới thiệu tự động liên kết để chúng tôi không yêu cầu liên kết thư viện nhưng cần cài đặt POD. Vì vậy, để cài đặt Pods sử dụng

cd ios && pod install && cd ..

Cấu trúc tập tin dự án

Nếu bạn muốn tải HTML từ tệp HTML cục bộ vào WebView thì bạn cần đưa chúng vào thư mục được mô tả dưới đây. & NBSP; Bạn phải tạo 2 bản sao của tệp HTML và phải đặt chúng vào một vị trí khác cho Android và iOS. Nếu các thư mục không có ở đó thì vui lòng tạo thư mục và sau đó đặt tệp HTML.

1

2. iOS sẽ tải HTML & NBSP bên ngoài; từ dự án> Tài nguyên> index.html

Mã số

Bây giờ hãy mở app.js trong bất kỳ trình chỉnh sửa mã nào và thay thế mã bằng mã sau

App.js

Hello' }}
  style={{ marginTop: 20 }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
/>

Để chạy ứng dụng & nbsp; React gốc

Mở lại thiết bị đầu cuối và nhảy vào dự án của bạn bằng cách sử dụng.

cd ProjectName

Để chạy dự án trên thiết bị ảo Android hoặc trên thiết bị gỡ lỗi thực

Hello' }}
  style={{ marginTop: 20 }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
/>

hoặc trên trình giả lập iOS bằng cách chạy (chỉ chạy macOS)

Hello' }}
  style={{ marginTop: 20 }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
/>

Tải xuống mã nguồn

Ảnh chụp màn hình đầu ra

IOS

Android

Đây là cách bạn có thể tải tệp HTML hoặc URL cục bộ trong React Native bằng cách sử dụng React-I-love-WebView. Nếu bạn có bất kỳ nghi ngờ hoặc bạn muốn chia sẻ điều gì đó về chủ đề bạn có thể nhận xét bên dưới hoặc liên hệ với chúng tôi ở đây. Sẽ có nhiều bài viết sắp ra mắt. Giữ nguyên!

Hy vọng bạn thích nó. 🙂

Làm cách nào để hiển thị HTML trong React Native WebView?