web-dev-qa-db-fra.com

Ajout de styles CSS à React Native WebView

Donc, je suis un peu perplexe sur ce point ... J'utilise une WebView dans une partie de notre application. La raison de cette WebView est que nous extrayons d'un noeud final d'API qui nous renvoie une chaîne HTML. La taille de la police et les autres éléments de cette chaîne HTML ne sont pas conçus dans le but d'être utilisés dans une application mobile. Nous essayons donc d'y apporter des modifications stylistiques pour une meilleure visibilité. J'ai vu des personnes ajouter des balises de style en haut du fichier html pour ajouter des styles html spécifiques à l'élément, et tout fonctionne généralement, à l'exception de la taille de la police dans le code HTML de WebView, le rendu est différent chaque fois que je clique sur l'écran comportant WebView contenu dans celui-ci.

Voici le code actuel (style + html + script):

let rawHTML = htmlStyle + this.props.itemDetails.body_html.replace("\n", "").replace(/("\/\/[c])\w/g, "\"https://cd").replace(/(width: 10.094%;)/g, "").replace(/(width: 84.906%;)/g, "") + heightScript

J'ai également consigné cette chaîne dans le débogueur pour m'assurer qu'elle est bien cousue, et j'ai même créé et index.html et y ai collé la chaîne exacte, pour m'assurer qu'elle s'affiche correctement.

Voici la chaîne de style:

let htmlStyle = `<style>
                        #height-calculator {
                          margin: 0;
                          padding: 0;
                        }
                        #height-calculator {
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            margin: 0;
                            padding: 0;
                        }
                        body {
                          width:100%;
                        }
                        h2 {
                          font-size: 48px;
                        }
                        p {
                          font-size: 18px;
                        }
                        h3 {
                          font-size: 32px
                        }
                        img {
                          width:98%;
                        }
                        td {
                          display: block !important;
                          width: 95% !important;
                        }
                        img {
                          width:98%;
                        }
                        hr {
                          width: 98%;
                        }
                        ol li ol li ol li {
                          position: relative; right: 85px;
                        }
                        ul {
                          width: 98%,
                          margin-left: -25px;
                        }
                        li {
                          width: 98%;
                        }
                        .tabs {
                          display: none;
                        }
                        .tabs > li {
                          display: none;
                        }
                        .tabs-content {
                          padding: 0;
                          list-style-type: none;
                        }
                        tr {
                          display: flex;
                          flex-direction: column;
                        }
               </style>`

Et enfin voici la WebView:

<WebView
  javaScriptEnabled={true}
  onNavigationStateChange={this.onNavigationStateChange.bind(this)}
  scrollEnabled={false}
  source={{html: rawHTML}}
  style={{height: Number(this.state.height)}}
  domStorageEnabled={true}
  scalesPageToFit={true}
  decelerationRate="normal"
  javaScriptEnabledAndroid={true} />

En outre, comme je l’ai mentionné, tous les autres styles appliqués fonctionnent, c’est principalement la taille de la police qui est super imprévisible.

Voici la vue lorsque je clique dessus une fois:

 enter image description here

Et puis je ne change pas et ne quitte pas l'application, je retourne en arrière, puis je clique sur le même bouton pour accéder au même affichage et je l'obtiens parfois (cela prend parfois plusieurs clics ... c'est très imprévisible):

 enter image description here

J'ai une vidéo de cela aussi, si vous pensez que cela aiderait cette explication. J'essaie de le raconter du mieux que je peux, haha.

Modifier:

Je pense que cela pourrait être un problème uniquement lié au simulateur? Si quelqu'un pouvait parler un peu de sagesse à ce sujet, ce serait encore génial. Je n'arrive pas à reproduire cette erreur lors de la fabrication.

cssreactjswebviewreact-native
5
Taylor King

J'ai récemment connu le même problème. Cela ne se produisait que pour moi sur iOS, pas sur Android.

La partie la plus étrange est l'incohérence dans la réplication. Je ne pouvais trouver aucun motif pour que le contenu de WebView soit dimensionné différemment. Un code HTML identique donnerait une taille de police parfois normale, mais parfois très réduite.

Ma solution venait d'un (RN 0.47) WebView prop:

scalesPageToFit ?: bool

Boolean qui contrôle si le contenu Web est mis à l'échelle pour s'adapter à la vue et permet à l'utilisateur de modifier l'échelle. La valeur par défaut est true.

J'ai essayé de définir scalesPageToFit sur false, et voilà, la page a cessé de se réduire:

<WebView
  source={{ html: myHtml }}
  scalesPageToFit={false}
/>

Le seul problème est que mon contenu a été redimensionné à une taille supérieure à celle du conteneur WebView sur Android. Pour résoudre ce problème, je règle simplement le prop scalesPageToFit sous condition, en fonction de la plate-forme:

<WebView
  source={{ html: myHtml }}
  scalesPageToFit={(Platform.OS === 'ios') ? false : true}
/>

A fonctionné à merveille pour moi!

7
djpo

J'ai utilisé ce lien . La raison pour laquelle j'ai choisi cette solution plutôt que la réponse acceptée est que je peux styliser les balises html à l'aide de styles natifs réactifs au lieu d'injecter une chaîne de déclaration de style avant le contenu réel.

const htmlStyles = { p: {fontFamily: 'Lato'} }
const htmlContent = <H1>My Html</H1>;

<HTML containerStyle={ {margin: 16} }
                html={ htmlContent } 
                tagsStyles={ htmlStyles } />
1
emil f.