rendering HTML in reagiscono Native

Nel mio Reagire app nativa, sto tirando nei dati JSON che ha elementi HTML prime come questo: <p>This is some text. Let’s figure out...</p>rendering HTML in reagiscono Native

ho aggiunto i dati a una visione nella mia app come questo:

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

Il problema è che l'HTML risulta grezzo, non viene visualizzato come se fosse in un browser. C'è un modo per far apparire i miei dati JSON come se fossero in un browser, nella mia vista app?

Grazie.

fonte

2015-03-29 Scott

in React, c'è la proprietà 'dangerouslySetInnerHTML' (https://facebook.github.io/react/docs/jsx-gotchas.html) per visualizzare l'HTML. Non riesco a testarlo ora, ma potrebbe funzionare anche con Native. – zvona

In realtà ho provato: '' non ha funzionato a meno che non stia facendo qualcosa di sbagliato. – Scott

controlla questo: https://gist.github.com/jsdf/7f983f2cd955fd75d6cc – zvona

Modifica marzo 2017: il prop html è stato dichiarato obsoleto. Utilizzare source invece:

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

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

Grazie a Justin per la puntualizzazione.

Edit Feb 2017: il PR è stata accettata un po 'indietro, in modo da rendere HTML in Reagire Nativo, semplicemente:

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

risposta originale:

non lo faccio penso che questo sia attualmente possibile. Il comportamento che stai vedendo è previsto, poiché il componente Testo emette solo ... beh, testo. Hai bisogno di un altro componente che emetta HTML - e questo è il WebView.

Purtroppo in questo momento non c'è modo di appena impostando direttamente il codice HTML in questo componente:

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

Comunque ho appena creato this PR che implementa una versione di base di questa funzione per cui speriamo che atterrerà in qualche forma presto.

fonte

2015-03-31 09:30:41

Awesome Colin, grazie per averlo fatto! Terrò d'occhio il problema github. – Scott

Secondo i documenti alle versioni 0.42 (https://facebook.github.io/react-native/docs/webview.html#html) la proprietà html è stata deprecata. Ora dice che dovrebbe essere usato con il puntello sorgente invece. 'Qui sono

'}} />'. – Justin

Ho trovato questo componente. https://github.com/jsdf/react-native-htmlview

Questo componente prende contenuto HTML e lo rende come viste nativi, con uno stile personalizzabile e gestione dei collegamenti, ecc

fonte

2015-08-18 06:40:31 sjoonk

Lo stile HTML con CSS non funziona con react-native-htmlview. Se questo è un problema, non lo consiglio. –

Non lo consiglio anche a me. – lngs

Reagire Native ha aggiornato la componente WebView per consentire il rendering html diretta. Ecco un esempio che funziona per me

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

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

fonte

2016-01-26 22:26:06

Il puntello html è [ora deprecato] (https://facebook.github.io/react-native/docs/webview.html). Usa invece il puntello sorgente. –

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

Questo ha funzionato per me :) Ho html file di testo aboutus.

fonte

2016-11-25 12:21:35

rendering HTML in reagiscono Native

risposta

Problemi correlati