web-dev-qa-db-ja.com

React Native WebViewにCSSスタイルを追加する

だから私はこれで少し困惑しています...私はアプリの一部でWebViewを使用しています。WebViewの理由は、HTML文字列に戻るAPIエンドポイントからプルしているためです。このHTML文字列のフォントサイズやその他のものは、モバイルアプリで使用するためにスタイル設定されていないため、見やすくするためにスタイルの変更をいくつか追加しようとしています。要素に特定のhtmlスタイルを追加するためにhtmlファイルの上部にスタイルタグを追加する人を見たことがあります。それに含まれるWebView。

これが現在のコードです（スタイル+ html +スクリプト）：

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

私はまた、この文字列をデバッガーでコンソールからログアウトして、適切にステッチされていることを確認し、正確な文字列を作成してindex.htmlに貼り付けて、そこに正しく表示されることを確認しています。

これがスタイル文字列です：

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>`

そして最後にここに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} />

また、適用した他のすべてのスタイルが機能していることを述べたように、非常に予測できないのは主にフォントサイズだけです。

1回クリックしたときのビューは次のとおりです。

enter image description here

そして、私はアプリを変更したり終了したりせずに、戻って同じボタンをクリックして同じディスプレイに入ると、時々これが表示されます（ときどき複数回のクリックが必要です...非常に予測不可能です）：

enter image description here

この説明に役立つと思われる場合は、このビデオも持っています。私はそれを私ができる限りの最高のことを再説しようとしています。

編集：

これはシミュレータのみに関連する問題かもしれないと思いますか？誰かがそれについて何らかの知恵を話すことができたとしても、それはまだ素晴らしいでしょう。本番ビルドでこのエラーを再現できないようです。

cssreactjswebviewreact-native
8
Taylor King

最近同じ問題が発生しました。これは、Androidではなく、iOSでのみ発生しました。

最も奇妙な部分は、レプリケーションの不整合です。 WebViewコンテンツのサイズが異なる場合のパターンを見つけることができませんでした。同一のHTMLを使用すると、フォントサイズが通常の場合もあれば非常に小さい場合もあります。

私の解決策は（RN 0.47） WebView プロップから来ました：

scalesPageToFit ?: bool

ビューに合わせてWebコンテンツを拡大縮小するかどうかを制御し、ユーザーが拡大縮小を変更できるようにするブール値。デフォルト値はtrueです。

scalesPageToFitをfalseに設定してみましたが、ページが縮小されなくなりました：

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

唯一の問題は、これによりコンテンツがAndroid上のWebViewのコンテナーよりも大きくなることです。これを修正するには、プラットフォームに基づいてscalesPageToFitプロパティを条件付きで設定するだけです。

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

私の魅力のように働いた！

9
djpo

私は このリンク を使用しました。受け入れられた回答よりもこのソリューションを選択する理由は、実際のコンテンツの前にスタイル宣言文字列を挿入する代わりに、reactネイティブスタイルを使用してhtmlタグをスタイルできるからです。

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

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