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ữ jsThêm mã HTML vào tệp
module.exports = [] => {
rewrites: async [] => [{
source: "/public/portfolio/index.html",
destination: "/pages/api/portfolio.js",
},],
}
4
Example
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",
},],
}
5Khi 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 webChú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ốcmodule.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àoNhả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ử
- Cách
- 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 ios2 để 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
rewrites: async [] => [{
source: "/public/portfolio/index.html",
destination: "/pages/api/portfolio.js",
},],
}
Trong hướng dẫn này, chúng tôi sẽ sử dụng gói
npm run android //or npm run ios4 để 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ạnThư 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
rewrites: async [] => [{
source: "/public/portfolio/index.html",
destination: "/pages/api/portfolio.js",
},],
}
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 NativeTó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 ios8. Về cơ bản,
npm run android //or npm run ios8 là một đối tượng chứa tất cả CSS của bạn; . Xem ví dụ bên dưới
Example
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
Example
This is an example of a simple HTML page with one paragraph.
4Hã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ụ
Example
This is an example of a simple HTML page with one paragraph.
6Bâ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 ios2 như hình bên dưới
Example
This is an example of a simple HTML page with one paragraph.
8Bắ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
rewrites: async [] => [{
source: "/public/portfolio/index.html",
destination: "/pages/api/portfolio.js",
},],
}
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ảnTrong 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",
},],
}
2Thư 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
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