將CSS樣式添加到React Native WebView

Question

所以我有點難以忍受這個......我在我們的應用程序的一部分中使用WebView，WebView的原因是因爲我們從一個API端點給我們一個HTML字符串。此HTML字符串中的字體大小和其他內容不是爲了在移動應用程序中使用而設計的，因此我們試圖添加一些文體更改以提高可見度。我已經看到人們在html文件的頂部添加樣式標籤以向元素添加特定的html樣式，並且除了WebView的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} /> 

而且，正如我所提到的所有應用正在工作的其他風格，它的主要只是字號那是超級不可預測的。

下面是這個視圖，當我點擊它一次：

然後，我不會改變或退出程序，我剛回去，然後點擊同一按鈕，輸入同樣的顯示，我得到這個有時（有時需要多次點擊...這是非常難以預測）：

我有這樣一個視頻，以及，如果你覺得這將有助於這個解釋。我試圖重複它最好的我可以哈哈。

編輯：

我覺得這可能是一個模擬器只有相關的問題？如果任何人都可以講一些智慧，那還是很棒的。我似乎無法在生產版本中重現此錯誤。

Answer 1

我最近經歷過同樣的問題。這隻發生在iOS上，而不是Android上。

最奇怪的部分是複製中的不一致性。當WebView內容大小不同時，我無法找到任何模式。相同的HTML會導致有時正常的字體大小，但其他時間非常小。

scalesPageToFit ?: bool

Boolean控制web內容是否被縮放以適合視圖和使用戶能夠改變：

我的解決辦法從（RN 0.47）WebView丙來到規模。默認值是true。

我試着設置scalesPageToFit到false，瞧，頁面停止縮減：

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

唯一的問題是，這引起了我的內容進行縮放比的WebView在Android容器大。爲了解決這個問題，我簡單地設置scalesPageToFit道具有條件，基於平臺：

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

工作就像一個魅力對我來說！