एचटीएमएल प्रस्तुत प्रतिक्रिया में मूल निवासी

Question

मेरी घरेलू एप्लिकेशन प्रतिक्रिया में, मैं JSON डेटा इस तरह कच्चे HTML तत्वों है कि में खींच रहा हूँ: <p>This is some text. Let&#8217;s figure out...</p>

मैं इस तरह के एक दृश्य के लिए डेटा जोड़ा है मेरे एप्लिकेशन में:

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

समस्या यह है कि HTML कच्चे हो जाता है, यह ब्राउज़र में ऐसा नहीं होता है। क्या मेरे जेएसओएन डेटा को मेरे ऐप व्यू के अंदर ब्राउज़र में दिखने का कोई तरीका है?

धन्यवाद।

Answer 1

मार्च 2017 संपादित करें: html प्रोप को हटा दिया गया है। बजाय source का उपयोग करें:

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

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

Justin के लिए धन्यवाद इस ओर इशारा करते हुए के लिए।

---

संपादित फ़र, 2017: पीआर एक समय पहले स्वीकार कर लिया गया है, इसलिए में प्रतिक्रिया मूल निवासी, तो बस HTML रेंडर करने के लिए:

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

---

मूल उत्तर:

मुझे नहीं पता लगता है कि यह वर्तमान में संभव है। जो व्यवहार आप देख रहे हैं, वह अपेक्षित है, क्योंकि टेक्स्ट घटक केवल आउटपुट करता है ... अच्छा, टेक्स्ट। आपको HTML का आउटपुट करने वाला एक और घटक चाहिए - और यह WebView है।

दुर्भाग्य से अभी सिर्फ सीधे इस घटक पर HTML स्थापित करने का कोई रास्ता नहीं है:

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

हालांकि मैं सिर्फ this PR जो इसलिए उम्मीद है कि यह ले जाया जाएगा इस सुविधा का मूल संस्करण को भी लागू बना लिया है जल्द ही कुछ रूप में।

Answer 2

मुझे यह घटक मिला। https://github.com/jsdf/react-native-htmlview

इस घटक HTML सामग्री लेता है और देशी विचारों के रूप में यह renders, अनुकूलन शैली और लिंक की हैंडलिंग, आदि के साथ

Answer 3

प्रतिक्रिया मूल निवासी WebView घटक को अपडेट किया गया प्रत्यक्ष एचटीएमएल प्रतिपादन के लिए अनुमति देने के लिए। यहाँ एक उदाहरण है कि काम करता है के लिए मुझे

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')} /> 

यह मेरे लिए काम किया :) मैं एचटीएमएल पाठ aboutus फ़ाइल है।