Render HTML trong Phản ứng Native

Question

Trong tôi Phản ứng ứng dụng Native, tôi kéo trong dữ liệu JSON có các phần tử HTML thô như thế này: <p>This is some text. Let&#8217;s figure out...</p>

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

<Text>{this.props.content}</Text>

Vấn đề là HTML xuất hiện thô, nó không hiển thị như trong trình duyệt. Có cách nào để lấy 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?

Cảm ơn.

Answer 1

Chỉnh sửa tháng 3 năm 2017: bảo vệ html không được dùng nữa. Sử dụng source thay vì:

<WebView source={{html: '<p>Here I am</p>'}} /> 

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

Nhờ Justin cho trỏ này ra.

---

Sửa Tháng 2 năm 2017: PR đã được chấp nhận trong một thời gian trở lại, vì vậy để render HTML trong Phản ứng Native, chỉ cần:

<WebView html={'<p>Here I am</p>'} /> 

---

gốc trả lời:

tôi không nghĩ rằng điều này hiện có thể. Hành vi mà 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.

Đáng tiếc là ngay bây giờ không có cách nào chỉ trực tiếp thiết lập các 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 this PR mà 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ẽ hạ cánh trong một số hình thức sớm.

Answer 2

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

thành phần này có nội dung HTML và làm cho nó như là quan điểm bản địa, với phong cách tùy biến và xử lý các liên kết, vv

Answer 3

Phản ứng Native đã cập nhật các thành phần WebView để cho phép vẽ trực tiếp html. Dưới đây là một ví dụ mà làm việc cho tôi

var htmlCode = "<b>I am rendered in a <i>WebView</i></b>"; 

<WebView 
    ref={'webview'} 
    automaticallyAdjustContentInsets={false} 
    style={styles.webView} 
    html={htmlCode} /> 

Answer 4

<WebView ref={'webview'} automaticallyAdjustContentInsets={false} source={require('../Assets/aboutus.html')} /> 

này làm việc cho tôi :) Tôi có tập tin html text aboutus.