Làm cách nào để hiển thị tệp html bên ngoài trong phản ứng?

Tôi đang sử dụng Tiếp theo. js nên bạn cần cài đặt nó. Nếu bạn chưa quen với nó, đây là liên kết để bắt đầu

Bạn thực sự cần chuyển sang Next JS

Và đây là những lý do, Tại sao?

Trung bình. com

2

Khi kho lưu trữ được cài đặt, chúng tôi sẽ xử lý các chức năng không có máy chủ (nếu mới), tiếp theo là thêm đoạn mã sau vào chức năng không có máy chủ

Tôi đang tạo một API xin chào mẫu bên trong thư mục pages/api sẽ trả về một tệp HTML để phản hồi

import fs from "fs";const filename = "/portfolio/index.html";module.exports = async(req, res) => {
 res.setHeader("Content-Type", "text/html, charset=utf-9");
 res.write(await fs.readFileSync(filename, "utf-8"));
 res.end();
};

3

Thêm tệp HTML là bước thứ ba

Thư mục

module.exports = () => {
 rewrites: async () => [{
  source: "/public/portfolio/index.html",
  destination: "/pages/api/portfolio.js",
 },],
}

3 trong thư mục gốc là vị trí cho tất cả các tệp tĩnh trong thư mục tiếp theo. kho lưu trữ js

Thêm mã HTML vào tệp

module.exports = () => {
 rewrites: async () => [{
  source: "/public/portfolio/index.html",
  destination: "/pages/api/portfolio.js",
 },],
}

4

    
        
    
    
        
This is an example of a simple HTML page with one  paragraph.

    

4

Đây là một bước quan trọng, bây giờ chúng tôi sẽ nói tiếp. js để hiển thị kết xuất mã HTML bên trong chỉ mục. html và trả lại chúng trong trang

module.exports = () => {
 rewrites: async () => [{
  source: "/public/portfolio/index.html",
  destination: "/pages/api/portfolio.js",
 },],
}

5

Khi người dùng mở trang hồ sơ,

module.exports = () => {
 rewrites: async () => [{
  source: "/public/portfolio/index.html",
  destination: "/pages/api/portfolio.js",
 },],
}

5endpoint sẽ nhận được yêu cầu hiển thị tệp HTML

module.exports = () => {
 rewrites: async () => [{
  source: "/public/portfolio/index.html",
  destination: "/pages/api/portfolio.js",
 },],
}

7 trên trang web

Chúng tôi sẽ kể tiếp. js để định cấu hình yêu cầu bằng khái niệm URL proxy và điều đó sẽ đạt được bằng cách thêm mã được theo dõi vào tệp

module.exports = () => {
 rewrites: async () => [{
  source: "/public/portfolio/index.html",
  destination: "/pages/api/portfolio.js",
 },],
}

8 trong thư mục gốc

module.exports = () => {
 rewrites: async () => [{
  source: "/public/portfolio/index.html",
  destination: "/pages/api/portfolio.js",
 },],
}

Bây giờ hồ sơ của chúng tôi. tuyến đường html sẽ chỉ hiển thị một tệp HTML

5

Đó là nó cho ngày hôm nay, cho đến lần sau, chúc một ngày tốt lành

Trang web của chúng tôi — iHateReading

Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter, LinkedIn, YouTube và Discord

Giả sử bạn muốn chuyển đổi trang web hoặc ứng dụng web của mình thành ứng dụng di động bằng cách sử dụng React Native hoặc bạn có mã HTML tĩnh mà bạn muốn hiển thị trên bất kỳ trang cụ thể nào trong ứng dụng của mình. Bạn sẽ làm gì?

Chắc chắn là không cần. Bạn có thể kết xuất HTML trực tiếp vào React Native. ồ. Thật ngạc nhiên. Vì vậy, trong bài viết này, chúng ta sẽ tìm hiểu cách kết xuất HTML thành React Native bằng thư viện

module.exports = () => {
 rewrites: async () => [{
  source: "/public/portfolio/index.html",
  destination: "/pages/api/portfolio.js",
 },],
}

9. Hãy xem nó hoạt động như thế nào

Nhảy ra đằng trước

• Thiết lập dự án React Native của chúng tôi
• Sử dụng

  npm run android 
  //or 
  npm run ios
  

  0 để hiển thị HTML thành React Native
  • Cách

    npm run android 
    //or 
    npm run ios
    

    0 phân tích cú pháp HTML thành React Native
  • Áp dụng kiểu cho các phần tử
• Khám phá một giải pháp thay thế cho

  npm run android 
  //or 
  npm run ios
  

  1

Một vài điều kiện tiên quyết cho hướng dẫn này bao gồm có npm và Node. js được cài đặt trên thiết bị của bạn cùng với hiểu biết cơ bản về React và React Native

Thiết lập dự án React Native của chúng tôi

Để bắt đầu hướng dẫn này, chúng ta cần thiết lập một dự án React Native. Chúng tôi sẽ làm như vậy bằng cách chạy lệnh sau

npx react-native init MyTestApp

Bây giờ chúng ta hãy di chuyển về phía trước. Sau khi tạo một dự án, chúng tôi sẽ chạy nó một lần để kiểm tra mọi thứ đang hoạt động như mong đợi bằng cách sử dụng một trong các lệnh sau

npm run android 
//or 
npm run ios

Ứng dụng sẽ xây dựng và bắt đầu chạy theo cấu hình bạn đã chọn, cho dù bạn đang sử dụng thiết bị ảo hay thiết bị Android hay iOS

Bạn có thể sửa đổi tệp

npm run android 
//or 
npm run ios

2 để xem các thay đổi trên trang chủ của mình — trang đăng ký của bạn. Tôi đã thay đổi một vài dòng mã để kiểm tra xem nó có hoạt động tốt hay không. Nếu mọi thứ suôn sẻ, bạn có thể thấy một trang chủ như hình bên dưới

Sử dụng module.exports = () => { rewrites: async () => [{ source: "/public/portfolio/index.html", destination: "/pages/api/portfolio.js", },],}9 để hiển thị HTML thành React Native

Trong hướng dẫn này, chúng tôi sẽ sử dụng gói

npm run android 
//or 
npm run ios

4 để kết xuất HTML vào ứng dụng React Native của chúng tôi. Giữ lại một số mã HTML mẫu để sử dụng sau này trong ứng dụng React Native

Thư viện

module.exports = () => {
 rewrites: async () => [{
  source: "/public/portfolio/index.html",
  destination: "/pages/api/portfolio.js",
 },],
}

9 là một thành phần mã nguồn mở với hơn ba nghìn sao GitHub và 46 cộng tác viên. Nó lấy HTML của bạn và hiển thị 100% chế độ xem gốc trong ứng dụng iOS hoặc Android của bạn

Thư viện này hỗ trợ tất cả các phương thức CSS văn bản mà chúng tôi thường sử dụng khi phát triển các ứng dụng web. Ngoài văn bản, nó còn hỗ trợ hình ảnh, thẻ neo và danh sách

Cách module.exports = () => { rewrites: async () => [{ source: "/public/portfolio/index.html", destination: "/pages/api/portfolio.js", },],}9 phân tích cú pháp HTML thành React Native

Tài liệu

module.exports = () => {
 rewrites: async () => [{
  source: "/public/portfolio/index.html",
  destination: "/pages/api/portfolio.js",
 },],
}

9 sử dụng sơ đồ luồng dữ liệu sau đây để minh họa cách công cụ này phân tích cú pháp HTML thành React Native

Tóm lại, trước tiên, đánh dấu HTML mà chúng tôi đã chuyển sẽ được phân tích thành DOM. Sau đó, Cây kết xuất tạm thời được lắp ráp dựa trên đầu vào. Sau đó, TTree được kết xuất thành Virtual DOM

Để tìm hiểu thêm về cách hoạt động của kết xuất, hãy tham khảo tài liệu. Nếu không, hãy chuyển sang ví dụ thực tế của chúng tôi

Áp dụng kiểu cho các phần tử

Để tạo kiểu, bạn có thể sử dụng kiểu nội tuyến, như vậy

Ở trên sẽ không phá vỡ ứng dụng của bạn. Nó hỗ trợ bốn đạo cụ để tùy chỉnh kiểu phần tử. cơ sở, kiểu id, kiểu lớp và kiểu thẻ

Ngoài ra còn có một cách khác để xử lý kiểu dáng, đó là sử dụng các bản ghi

npm run android 
//or 
npm run ios

8. Về cơ bản,

npm run android 
//or 
npm run ios

8 là một đối tượng chứa tất cả CSS của bạn; . Xem ví dụ bên dưới

    
        
    
    
        
This is an example of a simple HTML page with one  paragraph.

    

2

Để sử dụng các kiểu tùy chỉnh của bạn trong quá trình kết xuất HTML thành React Native, thư viện

module.exports = () => {
 rewrites: async () => [{
  source: "/public/portfolio/index.html",
  destination: "/pages/api/portfolio.js",
 },],
}

9 hỗ trợ thuộc tính

1. Bạn có thể chuyển kiểu đã khai báo của mình trong thuộc tính đó, như vậy

    
        
    
    
        
This is an example of a simple HTML page with one  paragraph.

    

4

Hãy nhớ rằng, khi hiển thị HTML và các kiểu tùy chỉnh cho ứng dụng React Native, các kiểu React Native sẽ bị bỏ qua khi xây dựng và sẽ không được áp dụng hoặc phản ánh

Với thư viện

module.exports = () => {
 rewrites: async () => [{
  source: "/public/portfolio/index.html",
  destination: "/pages/api/portfolio.js",
 },],
}

9, bạn có thể chơi với hệ sinh thái

3, được sử dụng để giả mạo DOM. Bạn có thể xử lý DOM bất cứ lúc nào. Ví dụ

    
        
    
    
        
This is an example of a simple HTML page with one  paragraph.

    

6

Bây giờ, hãy kết xuất mã HTML trong ứng dụng bằng thư viện bên ngoài. Để làm được điều đó, bạn cần sửa đổi tệp

npm run android 
//or 
npm run ios

2 như hình bên dưới

    
        
    
    
        
This is an example of a simple HTML page with one  paragraph.

    

8

Bắt đầu từ dòng số 10, trong biến

5, chúng tôi đã viết mã HTML của mình. Mã này sau đó được hiển thị bằng một phương thức có tên là

6 ở dòng số 94. Chúng tôi phải cung cấp HTML của mình dưới dạng thuộc tính nguồn và gói sẽ xử lý phần còn lại

Để chứng minh rằng HTML được hiển thị từ thư viện bên ngoài sẽ trông giống như mã được viết bằng React Native, dòng số 91 sử dụng phương thức React Native

7 mặc định để hiển thị văn bản

Cả văn bản được hiển thị theo phương thức mặc định và đầu ra văn bản từ HTML hiển thị sẽ giống như bên dưới

Khám phá một giải pháp thay thế cho module.exports = () => { rewrites: async () => [{ source: "/public/portfolio/index.html", destination: "/pages/api/portfolio.js", },],}9

Ngoài thư viện

module.exports = () => {
 rewrites: async () => [{
  source: "/public/portfolio/index.html",
  destination: "/pages/api/portfolio.js",
 },],
}

9, còn có một tùy chọn khác để hiển thị các thành phần web thành ứng dụng React Native — React Native WebView. Giải pháp thay thế đa nền tảng hiện đại này cho chế độ xem web tích hợp có hỗ trợ tuyệt vời để nhúng mọi thứ từ toàn bộ ứng dụng web vào các tệp HTML đơn giản

Trong thư viện này, bạn có thể tìm thấy một mẫu tương tự như trên. Kiểm tra ví dụ dưới đây

module.exports = () => {
 rewrites: async () => [{
  source: "/public/portfolio/index.html",
  destination: "/pages/api/portfolio.js",
 },],
}

2

Thư viện này có nhiều tính năng hữu ích — như tải lên và tải xuống tệp, cookie tùy chỉnh, điều hướng trang, v.v. Hãy xem hướng dẫn đầy đủ này về React Native WebView để xem liệu đó có phải là giải pháp phù hợp với nhu cầu của bạn không

Phần kết luận

React Native đang có nhu cầu do sự phổ biến của React. Nếu bạn hiểu về React, thì việc tạo một ứng dụng di động thông qua React bằng cách sử dụng hỗ trợ riêng cho React Native là điều đơn giản

---

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

---

Ngoài ra, bạn có thể đã có sẵn HTML và muốn tạo một ứng dụng di động bằng cách sử dụng mã hiện có của mình thay vì viết lại mã đó để phù hợp với nền tảng mục tiêu của bạn. Có thể hiển thị HTML thành React Native một cách tự nhiên bằng cách sử dụng một trong các phương pháp được thảo luận ở trên. Bạn không cần phải phát minh lại bánh xe để làm cho nó hoạt động trong ứng dụng Android hoặc iOS

Tôi đã từng viết lại mã để biến nó thành một ứng dụng gốc, nhưng tôi biết được một số thư viện khá tuyệt vời mà tôi có thể sử dụng để giới thiệu HTML của mình. Chế độ xem kết quả giống với chế độ xem gốc, vì vậy phương pháp này không ảnh hưởng đến trải nghiệm người dùng

Nếu bạn muốn hiển thị HTML trực tiếp trong ứng dụng React Native của mình, hãy đảm bảo bạn kiểm tra xem thư viện bạn muốn sử dụng có phù hợp với yêu cầu của bạn không. Nếu bạn có bất kỳ câu hỏi nào, hãy cho tôi biết trong phần bình luận bên dưới

Đăng NhậpTên Lửa. Tạo lại ngay lập tức các vấn đề trong ứng dụng React Native của bạn

LogRocket là một giải pháp giám sát React Native giúp bạn tái tạo các vấn đề ngay lập tức, ưu tiên các lỗi và hiểu hiệu suất trong các ứng dụng React Native của bạn

LogRocket cũng giúp bạn tăng tỷ lệ chuyển đổi và sử dụng sản phẩm bằng cách hiển thị cho bạn chính xác cách người dùng tương tác với ứng dụng của bạn. Các tính năng phân tích sản phẩm của LogRocket đưa ra lý do tại sao người dùng không hoàn thành một quy trình cụ thể hoặc không áp dụng một tính năng mới

Làm cách nào để chuyển đổi tệp HTML thành phản ứng?

Làm cách nào để in HTML trong ReactJS?

Làm cách nào để hiển thị HTML từ phản hồi API trong phản ứng?

Làm cách nào để tích hợp HTML trong ReactJS?