React-native WebView render-html

Một thành phần được sử dụng để bọc các phần tử có thể nhấn được (e. g. khi được cung cấp   91). Lưu ý rằng các yếu tố văn bản sẽ không được bao bọc;

Mặc định.   93

RenderHTMLProps3

không bắt buộc

RenderHTMLProps3_______5_______:ComponentType<RenderHTMLProps8_______3_______0RenderHTMLProps1

Thành phần WebView được plugin sử dụng (iframe, bảng). Xem @native-html/plugins

Mặc định. GenericPressable03

{2

không bắt buộc

{2_______5_______:13_______5RenderHTMLProps1

Liệt kê các thuộc tính kiểu CSS nội tuyến cụ thể trong danh sách trắng và bỏ qua các thuộc tính khác

cảnh báo

Tên thuộc tính phải là camelCased. ví dụ, GenericPressable10 nên được viết là GenericPressable11

{8

không bắt buộc

{8?:  1RenderHTMLProps1

Kiểu mặc định cho tài liệu (root). phong cách kế thừa sẽ được chuyển giao cho trẻ em. Điều đó cũng hoạt động đối với các kiểu văn bản

Nhận xét

Bất kỳ GenericPressable18 nào được sử dụng trong các phong cách đó phải được đăng ký với prop

cảnh báo

KHÔNG sử dụng API GenericPressable20 để tạo các kiểu đó

  4

không bắt buộc

  4_______5_______:  7RenderHTMLProps1

Khi GenericPressable27 (mặc định), vô danh ​GenericPressable28 nút cha mẹ của một nút ______12_______29 cô đơn không được dịch thành phần tử React Native GenericPressable30. Thay vào đó, con của họ được kết xuất trực tiếp, e. g. không có lớp bọc GenericPressable30

Mặc định. GenericPressable27

cảnh báo

Trừ khi thực sự cần thiết, điều này nên được để lại cho GenericPressable27 vì một số kiểu không áp dụng cho các phần tử React Native GenericPressable30 lồng nhau (GenericPressable35, GenericPressable36. )

Ví dụ

Với GenericPressable27

<Cụm từ>

<Văn bản>Xin chàoTText>

Cụm từ>TPhrasing>

được dịch sang

<Văn bản>Xin chàoText>

Với GenericPressable38

<Cụm từ>

<Văn bản>Xin chàoTText>

Cụm từ>TPhrasing>

được dịch sang

<Văn bản><Văn bản>HelloText>Text>

GenericPressable0

không bắt buộc

GenericPressable0_______5__________:GenericPressable3_______8_______GenericPressable5<12_______7GenericPressable8  1RenderHTMLProps0RenderHTMLProps0RenderHTMLProps1

Cung cấp các kiểu hỗn hợp để nhắm mục tiêu các phần tử được chọn bởi các lớp CSS

Nhận xét

Bất kỳ GenericPressable18 nào được sử dụng trong các phong cách đó phải được đăng ký với prop

cảnh báo

KHÔNG sử dụng API GenericPressable20 để tạo các kiểu đó

?4

không bắt buộc

?4_______5_______:?7?8:6_______0GenericPressable8:2:GenericPressable7:5 :6 :0RenderHTMLProps1

Hàm lấy contentWidth và tagName làm đối số và trả về chiều rộng mới. Có thể trả về Infinity để biểu thị độ rộng không bị giới hạn

Mặc định. GenericPressable72

Nhận xét

• Tận dụng ​GenericPressable73 hook bên trong trình kết xuất tùy chỉnh để có chiều rộng tối đa cho thẻ này
• Các thay đổi đối với chỗ dựa này sẽ gây ra cập nhật cây phản ứng. Luôn luôn ghi nhớ nó

?8

không bắt buộc

?8_______5_______::0RenderHTMLProps1

Chiều rộng của nội dung HTML để hiển thị. Phương pháp được khuyến nghị là vượt qua GenericPressable80 trừ đi mọi khoảng đệm hoặc lề

Mặc định. GenericPressable81

ComponentType6

không bắt buộc

ComponentType6?:ComponentType9RenderHTMLProps1

Tùy chỉnh các mô hình phần tử cho các thẻ mục tiêu

<2

không bắt buộc

<2?:GenericPressable5_______8_______GenericPressable7GenericPressable8<9RenderHTMLProps0RenderHTMLProps1

Cung cấp hỗ trợ cho các kiểu kiểu danh sách không được thư viện này hỗ trợ

Nhận xét

Kiểm tra nhiều cài đặt trước được cung cấp bởi chúng không yêu cầu nỗ lực

Ví dụ

nhập tiếng Do Thái từ '@jsamr/counter-style/presets/tiếng Do Thái';

const customListStyleSpecs = {

tiếng Do Thái. {

loại. 'văn bản',

counterStyleRenderer. tiếng Do Thái

}

};

GenericPressableProps3

không bắt buộc

GenericPressableProps3_______5_______:  7RenderHTMLProps1

Thực nghiệm

Vô hiệu hóa cẩu. Đặc biệt hữu ích khi kết xuất với Reac-native-web. Lưu ý rằng bố cục của bạn có thể bị hỏng ở dạng gốc

Mặc định. GenericPressable38

GenericPressableProps9

không bắt buộc

GenericPressableProps9_______5_______:  7RenderHTMLProps1

Thực nghiệm

Tắt tính năng thu gọn khoảng trắng. Đặc biệt hữu ích nếu html của bạn đang được xử lý trước phía máy chủ bằng công cụ khai thác

Mặc định. GenericPressable38

RenderHTMLProps05

không bắt buộc

RenderHTMLProps05_______5_______:  7RenderHTMLProps1

Đăng nhập vào bảng điều khiển ảnh chụp nhanh của kết xuất ____13_______58 sau mỗi lần vô hiệu hóa cây kết xuất tạm thời

Mặc định. GenericPressable38

RenderHTMLProps11

không bắt buộc

RenderHTMLProps11_______5_______:3_______14RenderHTMLProps1

Các đạo cụ mặc định cho các phần tử Văn bản trong cây kết xuất

Nhận xét

"phong cách" sẽ được hợp nhất vào phong cách riêng của tnode

RenderHTMLProps17

không bắt buộc

RenderHTMLProps17_______5_______:RenderHTMLProps20RenderHTMLProps1

Các đạo cụ mặc định cho các phần tử View trong cây kết xuất

Nhận xét

"phong cách" sẽ được hợp nhất vào phong cách riêng của tnode

RenderHTMLProps23

không bắt buộc

RenderHTMLProps23_______5_______:3_______8RenderHTMLProps1

Đạo cụ mặc định cho các phần tử WebView trong cây kết xuất được plugin sử dụng

RenderHTMLProps29

không bắt buộc

RenderHTMLProps29_______5_______:RenderHTMLProps32RenderHTMLProps1

Một đối tượng mà các cuộc gọi lại sẽ được gọi khi một phần tử DOM hoặc nút văn bản đã được phân tích cú pháp và các phần tử con của nó được đính kèm. Điều này thật tuyệt vời để giả mạo dom, xóa con, chèn nút, thay đổi dữ liệu nút văn bản. vân vân

RenderHTMLProps35

không bắt buộc

RenderHTMLProps35_______5_______::0RenderHTMLProps1

Giá trị mặc định tính bằng pixel cho 1em

RenderHTMLProps41

không bắt buộc

RenderHTMLProps41_______5_______:  7RenderHTMLProps1

Bật hoặc tắt xử lý CSS nội tuyến của các kiểu nội tuyến

Mặc định. GenericPressable27

Nhận xét

Nếu bạn muốn cho phép hoặc không cho phép các thuộc tính cụ thể, hãy sử dụng đạo cụ {2 hoặc {22

RenderHTMLProps47

không bắt buộc

RenderHTMLProps47_______5_______:  7RenderHTMLProps1

Tuân thủ chặt chẽ tiêu chuẩn HTML và bỏ qua các thẻ ?66 đóng ngữ cảnh định dạng nội tuyến

Mặc định. GenericPressable38

Nhận xét

Giá trị được đề xuất là GenericPressable27 trên các nền tảng không phải web. Cũng lưu ý rằng đây là một tính năng thử nghiệm, do đó có thể không ổn định về hành vi

Ví dụ

<p>

Xin chào<br />

p>p>

Khi cờ này được đặt thành GenericPressable27, một dòng sẽ được in thay vì hai dòng trên nền tảng gốc, đây là hành vi tuân thủ HTML

RenderHTMLProps53

không bắt buộc

RenderHTMLProps53_______5_______:  7RenderHTMLProps1

React Native không xử lý các dòng như chúng ta mong đợi trên trình duyệt web. Ví dụ

<Xem>

<Văn bản>Văn bản>

Xem>View>

sẽ kéo dài 20 dpi về chiều cao. Đặt giá trị này thành GenericPressable27 sẽ khiến trình kết xuất tính đến những điểm kỳ quặc của React Native đó. Xem thêm vé này. https. //git. io/JerwX

Mặc định. GenericPressable38

Nhận xét

Đây là một tính năng thử nghiệm, do đó có thể không ổn định về hành vi

RenderHTMLProps59

không bắt buộc

RenderHTMLProps59_______5_______:  7RenderHTMLProps1

Bật hoặc tắt hành vi CSS thu gọn lề (thử nghiệm. ). Xem tài liệu MDN

Mặc định. GenericPressable38

Nhận xét

Hạn chế

• Chỉ có anh chị em liền kề sụp đổ được thực hiện
• Nếu một trong các chiều cao của lề tính bằng phần trăm, thì sẽ không xảy ra hiện tượng thu gọn
• Sẽ áp dụng bừa bãi cho tất cả các thuộc tính ?85 (bao gồm cả flex), đây không phải là tiêu chuẩn
• Có thể không hoạt động tốt với ______12_______28 nút chỉ có một nút con

Đây là một tính năng thử nghiệm, do đó có thể không ổn định về hành vi

RenderHTMLProps65

không bắt buộc

RenderHTMLProps65_______5_______:  7RenderHTMLProps1

Bật hoặc tắt kiểu dự phòng cho từng thẻ. Ví dụ: các thẻ ?93 sẽ có ?94 được đặt thành 'pre' theo mặc định

Mặc định. GenericPressable27

RenderHTMLProps71

không bắt buộc

RenderHTMLProps71_______5_______:3_______74RenderHTMLProps1

Một bản ghi cho các phông chữ CSS cụ thể

Nhận xét

Sử dụng :02

RenderHTMLProps77

không bắt buộc

RenderHTMLProps77?:RenderHTMLProps80RenderHTMLProps1

ParserOptions cho htmlparser2

Mặc định. :09

RenderHTMLProps83

không bắt buộc

RenderHTMLProps83?___:GenericPressable3_______8__________GenericPressable5<12_______7GenericPressable8  1RenderHTMLProps0RenderHTMLProps0RenderHTMLProps1

Cung cấp các kiểu kết hợp để nhắm mục tiêu các phần tử được xác định bởi thuộc tính :24

Nhận xét

Bất kỳ GenericPressable18 nào được sử dụng trong các phong cách đó phải được đăng ký với prop

cảnh báo

KHÔNG sử dụng API GenericPressable20 để tạo các kiểu đó

RenderHTMLProps97

không bắt buộc

RenderHTMLProps97?___:?7{01:13_______03GenericPressable8{05:13_______07:5 :6 {10RenderHTMLProps1

Bỏ qua các nút DOM cụ thể

trả lại. GenericPressable27 nếu nút này không được đưa vào DOM, còn bất cứ điều gì khác

Nhận xét

• Hàm này được áp dụng trong quá trình phân tích cú pháp DOM, do đó có rất ít chi phí. Tuy nhiên, điều đó có nghĩa là một nút anh chị em tiếp theo sẽ không khả dụng vì nó chưa được phân tích cú pháp
• Sử dụng {13 nếu bạn chỉ cần nhắm mục tiêu các tên thẻ cụ thể

cảnh báo

Khi chức năng này được gọi, nút chưa được gắn vào nút cha hoặc anh chị em của nó. Sử dụng đối số thứ hai ({05) nếu bạn cần thực hiện logic dựa trên cha mẹ

{13

không bắt buộc

{13?:{16<GenericPressable7RenderHTMLProps0RenderHTMLProps1

Danh sách các thẻ chữ thường không được đưa vào DOM

{22

không bắt buộc

{22_______5_______:{5RenderHTMLProps1

Đưa vào danh sách đen các thuộc tính kiểu CSS nội tuyến cụ thể và cho phép các thuộc tính khác

Nhận xét

Lưu ý rằng nếu bạn hoàn toàn không muốn xử lý kiểu nội tuyến, bạn nên đặt giá trị RenderHTMLProps41 thành GenericPressable38

cảnh báo

Tên thuộc tính phải là camelCased. ví dụ, GenericPressable10 nên được viết là GenericPressable11

{28

không bắt buộc

{28_______5__________:?7{32:13_______34:5 :6 {37RenderHTMLProps1

Trình xử lý được gọi khi siêu dữ liệu tài liệu có sẵn. Nó sẽ kích hoạt lại các thay đổi nội dung HTML

{40

không bắt buộc

{40_______5_______:5_______7{44:12_______7:5 :6 {37RenderHTMLProps1

Được kích hoạt khi HTML có sẵn cho thành phần RenderHTML

{52

không bắt buộc

{52_______5_______6_______?7{56:13_______58:5 :6 {37RenderHTMLProps1

Được kích hoạt khi cây kết xuất tạm thời thay đổi. Hữu ích cho việc gỡ lỗi

{64

không bắt buộc

{64_______5_______:12_______7RenderHTMLProps1

Màu được sử dụng cho các mục có thể nhấn, cho hiệu ứng gợn sóng (Android) hoặc tô sáng (các nền tảng khác)

Mặc định. ComponentType08

{70

không bắt buộc

{70_______5_______:{73RenderHTMLProps1

Cung cấp tiêu đề cho các phần tử được nhúng cụ thể, chẳng hạn như hình ảnh, iframe

Ví dụ

chức năng cung cấpEmbeddedHeaders(uri, tagName, params) {

if (tagName === "img" &&

uri. startsWith("https. //ví dụ. com")) {

trả về {

Ủy quyền. "Người mang daem6QuaeloopheiD7Oh"

}

}

//

<RenderHTML cung cấp EmbeddedHeaders={provideEmbeddedHeaders} />

{76

không bắt buộc

{76_______5__________:?7{80:13_______82:5 :6 {85<___RenderHTMLProps8GenericPressable8GenericPressable7{90{91<RenderHTMLProps8_______3_______0_______3_______0_______3_______1

Thay thế lỗi mặc định nếu không thể tìm nạp nội dung của trang web từ xa

{98

không bắt buộc

{98?___:?7{80:___{82:5 :6 {85<___RenderHTMLProps8GenericPressable8GenericPressable7{90{91<RenderHTMLProps8_______3_______0_______3_______0_______3_______1

Thay thế trình tải mặc định trong khi tìm nạp nội dung của trang web từ xa

  20

không bắt buộc

  20_______5_______:  23RenderHTMLProps1

Trình kết xuất tùy chỉnh của bạn

Nhận xét

người dùng TypeScript. Để có intellisense cho trình kết xuất tùy chỉnh, hãy đặt rõ ràng loại trình kết xuất tùy chỉnh của bạn thành một trong số ​ComponentType65, ​ComponentType66 hoặc ​ComponentType67 tùy thuộc vào ​ComponentType68 được xác định cho thẻ này (xem ví dụ bên dưới)

Ví dụ

Trình kết xuất tùy chỉnh cho ComponentType69 thẻ kích hoạt cảnh báo khi nhấn

nhập Phản ứng từ 'phản ứng';

nhập RenderHTML, { CustomBlockRenderer } from 'react-native-render-html';

nhập { Cảnh báo } từ 'react-native';

const onPress = () => Alert.cảnh báo("Tôi đã nhấn div. ");

// (TypeScript) Chú ý kiểu cho intellisense

const DivRenderer. CustomBlockRenderer = chức năng DivRenderer( . { TDefaultRenderer, ...đạo cụ }) {

return <TDefaultRenderer {. đạo cụ} onPress={onPress} />;

}

const trình kết xuất = { div: DivRenderer }

//

return <RenderHTML trình kết xuất={renderers} />

  26

không bắt buộc

  26_______5_______:  29_______8_______  31RenderHTMLProps0RenderHTMLProps1

Đạo cụ để sử dụng trong trình kết xuất tùy chỉnh với ComponentType79

Nhận xét

• Khi bạn sử dụng hook, bạn sẽ hợp nhất sâu đối tượng này với các đạo cụ kết xuất mặc định
• người dùng bản đánh máy. Nếu bạn cần thêm các trường vào ____0_______31 giao diện, bạn nên sử dụng

khai báo mô-đun 'react-native-render-html' {

giao diện RenderersProps {

div?. {

customProp. boolean;

};

}

}

  35

không bắt buộc

  35_______5__________:?7{01:13_______07:5 :6 RenderHTMLProps8RenderHTMLProps1

Chọn gốc DOM trước khi tạo TTree. Ví dụ: bạn có thể lặp lại phần tử con cho đến khi bạn đến phần tử bài viết và trả về phần tử này

Nhận xét

Được áp dụng sau khi phân tích cú pháp DOM, trước khi chuẩn hóa và xây dựng TTree. Trước khi chuẩn hóa ngụ ý rằng một phần thân sẽ được thêm vào cây sau khi chọn gốc

  47

không bắt buộc

  47_______5_______:  50RenderHTMLProps1

Đặt điểm đánh dấu tùy chỉnh từ một ______7_______99 và tất cả các phần tử con của nó. ​<00 sẽ có thể truy cập được trong trình kết xuất tùy chỉnh thông qua <01 prop

Mặc định. GenericPressable03

{80

yêu cầu

{80:  55RenderHTMLProps1

Nguồn đối tượng để kết xuất (hoặc là <08, <09 hoặc là <10)

  58

không bắt buộc

  58?________6____13_______16_______8_______GenericPressable7RenderHTMLProps0RenderHTMLProps1

Danh sách các phông chữ có sẵn trong nền tảng hiện tại. Những phông chữ này sẽ được sử dụng để chọn kết quả khớp đầu tiên trong thuộc tính CSS GenericPressable18, hỗ trợ danh sách phông chữ được phân tách bằng dấu phẩy. Theo mặc định, một số phông chữ được chọn cho mỗi nền tảng

Bạn có thể kết xuất HTML trong React Native không?

React Native WebView có bị phản đối không?

Chúng tôi có thể sử dụng WebView trong React Native không?