Hướng dẫn how do i display html in react native webview? - làm cách nào để hiển thị html trong chế độ xem web gốc phản ứng?

Trong ứng dụng gốc React của tôi, tôi đang lấy dữ liệu JSON có các yếu tố HTML thô như thế này:

Here I am
'}} />

Tôi đã thêm dữ liệu vào chế độ xem trong ứng dụng của mình như thế này:

Here I am
'}} />

Vấn đề là HTML xuất hiện RAW, nó không thể hiện như trong trình duyệt. Có cách nào để dữ liệu JSON của tôi trông giống như trong trình duyệt, bên trong chế độ xem ứng dụng của tôi không?

Benmorel

32.9K48 Huy hiệu vàng173 Huy hiệu bạc307 Huy hiệu đồng48 gold badges173 silver badges307 bronze badges

Đã hỏi ngày 29 tháng 3 năm 2015 lúc 21:21Mar 29, 2015 at 21:21

4

Chỉnh sửa tháng 1 năm 2021: Các tài liệu gốc React hiện đang khuyến nghị React bản địa WebView:: The React Native docs currently recommend React Native WebView:

Here I am
' }}
/>

https://github.com/react-native-webview/react-native-webview

Nếu bạn không muốn nhúng

Here I am
'}} />

1. Here I am
   '}} />
   

   3

2. Here I am
   '}} />
   

   4

Chỉnh sửa tháng 3 năm 2017: Prop

Here I am
'}} />

Here I am
'}} />

Here I am
'}} />

https://facebook.github.io/react-native/docs/webview.html#html

Cảm ơn Justin đã chỉ ra điều này.

Chỉnh sửa tháng 2 năm 2017: PR đã được chấp nhận một thời gian trước, vì vậy để hiển thị HTML trong React Native, đơn giản là:

Here I am
'} />

Câu trả lời ban đầu:

Tôi không nghĩ rằng điều này hiện tại là có thể. Hành vi bạn đang thấy được mong đợi, vì thành phần văn bản chỉ xuất ra ... tốt, văn bản. Bạn cần một thành phần khác xuất ra HTML - và đó là WebView.

Thật không may, ngay bây giờ không có cách nào chỉ cần đặt trực tiếp HTML trên thành phần này:

https://github.com/facebook/react-native/issues/506

Tuy nhiên, tôi vừa tạo PR này thực hiện một phiên bản cơ bản của tính năng này, vì vậy hy vọng nó sẽ sớm xuất hiện dưới một hình thức.

Đã trả lời ngày 31 tháng 3 năm 2015 lúc 9:30Mar 31, 2015 at 9:30

Colin Ramsaycolin RamsayColin Ramsay

15.9k8 Huy hiệu vàng51 Huy hiệu bạc57 Huy hiệu Đồng8 gold badges51 silver badges57 bronze badges

6

Tôi tìm thấy thành phần này. https://github.com/jsdf/react-fress-htmlview

Thành phần này lấy nội dung HTML và hiển thị nó là chế độ xem gốc, với kiểu tùy chỉnh và xử lý các liên kết, v.v.

Đã trả lời ngày 18 tháng 8 năm 2015 lúc 6:40Aug 18, 2015 at 6:40

Sjoonksjoonksjoonk

1791 Huy hiệu bạc2 Huy hiệu đồng1 silver badge2 bronze badges

7

Một thành phần bản địa JavaScript thuần túy kết xuất HTML của bạn thành các chế độ xem gốc 100%. Nó được thực hiện để cực kỳ có thể tùy chỉnh và dễ sử dụng và nhằm mục đích có thể làm cho bất cứ thứ gì bạn ném vào nó.

react-native-render-html

Sử dụng thành phần này sẽ cải thiện dấu chân và hiệu suất bộ nhớ ứng dụng của bạn khi so sánh với

Here I am
'}} />

Cài đặt

Here I am
'}} />

Cách sử dụng cơ bản

import React from "react";
import { ScrollView, useWindowDimensions } from "react-native";
import RenderHTML from "react-native-render-html";

const html = `
  
This HTML snippet is now rendered with native components !
  
Enjoy a webview-free and blazing fast application
  

  Look at how happy this native cat is
`;

export default function App() {
  // Allow images to scale to available width
  // with contentWidth prop.
  const { width } = useWindowDimensions();
  return (
    
      
    
  );
}

Here I am
'}} />

Bạn có thể tùy chỉnh kiểu của các yếu tố thông qua tên lớp, thẻ và thậm chí bạn có thể đăng ký các trình kết xuất tùy chỉnh cho các thẻ. Thông tin thêm trên trang web chính thức.

Đã trả lời ngày 27 tháng 2 năm 2019 lúc 6:46Feb 27, 2019 at 6:46

Hardik Viranihardik ViraniHardik Virani

1.6275 huy hiệu vàng22 Huy hiệu bạc36 Huy hiệu đồng5 gold badges22 silver badges36 bronze badges

1

Tôi sử dụng chức năng JS thay thế một cách đơn giản.replace simply.

{item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")}

Đã trả lời ngày 27 tháng 3 năm 2019 lúc 9:38Mar 27, 2019 at 9:38

2

React Native đã cập nhật thành phần WebView để cho phép kết xuất HTML trực tiếp. Đây là một ví dụ phù hợp với tôi

var htmlCode = "I am rendered in a WebView";

Đã trả lời ngày 26 tháng 1 năm 2016 lúc 22:26Jan 26, 2016 at 22:26

Shaheen Ghiassyshaheen GhiasssyShaheen Ghiassy

7.2053 huy hiệu vàng38 Huy hiệu bạc40 Huy hiệu đồng3 gold badges38 silver badges40 bronze badges

1

Điều này đã làm việc cho tôi :) Tôi có văn bản HTML về tệp.

Đã trả lời ngày 25 tháng 11 năm 2016 lúc 12:21Nov 25, 2016 at 12:21

Ganesh Kannaganesh KannaGanesh Kanna

2.22919 Huy hiệu bạc29 Huy hiệu đồng19 silver badges29 bronze badges

import HTML from "react-native-render-html";
var htmlCode = "I am Italic";

Đã trả lời ngày 17 tháng 9 năm 2021 lúc 11:14Sep 17, 2021 at 11:14

VivekvivekVivek

4.72034 Huy hiệu bạc40 Huy hiệu đồng34 silver badges40 bronze badges

Thành phần

Here I am
'}} />

hello, world!

Nhưng nếu tôi gửi đoạn trích HTML trong một tài liệu, như ví dụ dưới đây, thì nó thực sự đã hiển thị tài liệu:

    ${data.content}`}} />
 

Đã trả lời ngày 20 tháng 4 lúc 16:49Apr 20 at 16:49

gil.fernandesgil.fernandesgil.fernandes

Huy hiệu vàng 12k556 Huy hiệu bạc72 Huy hiệu đồng5 gold badges56 silver badges72 bronze badges

Làm thế nào tải tệp HTML trong WebView trong React Native?

Tôi có thể sử dụng HTML trong React Native không?

Chuẩn bị của WebView nào được sử dụng để gán HTML?

Chúng ta có thể sử dụng HTML và CSS trong React Native không?