Hướng dẫn how do you load local html file in webview in react - làm thế nào để bạn tải tệp html cục bộ trong webview trong 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

<WebView
  style={{flex: 1}}
  originWhitelist={['*']}
  source={{ html: '<h2>Hello</h2>' }}
  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

<WebView
  style={{flex: 1}}
  originWhitelist={['*']}
  source={{ uri: "https://aboutreact.com" }}
  style={{ marginTop: 20 }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
/>

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

<WebView
  style={{flex: 1}}
  originWhitelist={['*']}
  source={{ html: '<h2>Hello</h2>' }}
  style={{ marginTop: 20 }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
/>

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

if(isAndroid){
  return (
      <WebView
        style={{flex: 1}}
        originWhitelist={['*']}
        source={{uri:'file:///android_asset/index.html'}}
        style={{ marginTop: 20 }}
        javaScriptEnabled={true}
        domStorageEnabled={true}
      />
  )
}else{
  return(
    <WebView
      style={{flex: 1}}
      originWhitelist={['*']}
      source={'./resources/index.html'}
      style={{ marginTop: 20 }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
}

Để 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

<WebView
  style={{flex: 1}}
  originWhitelist={['*']}
  source={{ html: '<h2>Hello</h2>' }}
  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

<WebView
  style={{flex: 1}}
  originWhitelist={['*']}
  source={{ html: '<h2>Hello</h2>' }}
  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

<WebView
  style={{flex: 1}}
  originWhitelist={['*']}
  source={{ html: '<h2>Hello</h2>' }}
  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

<WebView
  style={{flex: 1}}
  originWhitelist={['*']}
  source={{ html: '<h2>Hello</h2>' }}
  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)

<WebView
  style={{flex: 1}}
  originWhitelist={['*']}
  source={{ html: '<h2>Hello</h2>' }}
  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ó. 🙂

Cách tải HTML trong WebView phản ứng