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 sang React Native bằng thư viện
npx react-native init MyTestApp0. Hãy xem nó hoạt động như thế nào
Nhảy ra đằng trước
npx react-native init MyTestApp
1npm run android //or npm run ios
0
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 npx react-native init MyTestApp
0 để 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 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
npx react-native init MyTestApp0 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 npx react-native init MyTestApp
0 phân tích cú pháp HTML thành React Native
Tài liệu
npx react-native init MyTestApp0 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 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
//JavaScript const mixedStyle = { body: { whiteSpace: 'normal', color: '#aaa' }, p: { color: '#fff' } }
Để 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
npx react-native init MyTestApp0 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
npm run android //or npm run ios1
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
npx react-native init MyTestApp0, 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ụ
npm run android //or npm run ios3
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 ios2 như hình bên dưới
npm run android //or npm run ios5
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 npx react-native init MyTestApp
0
Ngoài thư viện
npx react-native init MyTestApp0, còn có một tùy chọn khác để kết xuất 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
npm run android //or npm run ios9
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
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 chấp nhận một tính năng mới