2. 程式人生 > >React Native 原生RN巢狀webView，並自適應高度

React Native 原生RN巢狀webView，並自適應高度

阿新 • • 發佈：2019-02-02
import React, { Component } from 'react'; import { StyleSheet, View, Dimensions, Text } from 'react-native'; const { width, height } = Dimensions.get('window'); import WebViewAutoHeight from './WebViewAutoheight' const HTML = ` <!DOCTYPEhtml>\n <html> <head>
<title>HTML字串</title> <metahttp-equivmetahttp-equiv="content-type" content="text/html;charset=utf-8"> <meta name="viewport"content="width=320, user-scalable=no"> <style type="text/css"> body { margin: 0; padding: 0; font
: 40% arial, sans-serif; background: #FFF; padding: 10px; } </style> </head> <body> <p><br>紅纓子高粱，俗稱小紅樑，是赤水河流域特產的一種有機糯高粱。它是茅臺鎮醬香型白酒的關鍵釀酒原料。因不同於其他高粱，粒小、皮厚、堅實、飽滿，紅纓子高粱被形象稱為“沙”。<br><br><br><img src="https://zn-image.oss-cn-shenzhen.aliyuncs.com/supplychain-dev/test/articleEdit/PhbM5hiSHF.jpg"
style="max-width:100%;"><br>茅臺酒所代表的醬香酒，有三個獨特工藝特點，都與紅纓子高粱有關。<br><br><br>第一， 茅臺酒兩次投料，其他白酒一年四季都在投料，兩次投料即指紅纓子高粱，謂之“下沙”。<br><br>第二， 茅臺酒生產週期歷時一年，七次精釀，只有紅纓子高粱才能歷經九次蒸煮，謂之“回沙”。<br><br>第三，茅臺酒是整粒高粱參與發酵，約20%破碎率，此類傳統工藝的醬香酒，謂之“坤沙”（整粒之意）。<br><br>紅纓子高粱單寧含量約1.61%，總澱粉含量65%以上，支鏈澱粉含量佔總澱粉含量的88%~93%。<br><img src="https://zn-image.oss-cn-shenzhen.aliyuncs.com/supplychain-dev/test/articleEdit/PkAb7NiBfH.jpg" style="max-width:100%;"><br>紅纓子高粱支鏈澱粉含量高，其截面呈玻璃質地狀，十分有利於回沙工藝的多輪次翻烤，使茅臺鎮醬香型白酒每一輪的營養消耗有一合理範圍。支鏈澱粉(amylopection)又稱膠澱粉,分子相對較大,一般由幾千個葡萄糖殘基組成。支鏈澱粉加熱糊化後，分子中的鏈較為鬆散，因此具有較高的粘度。<br><br>紅纓子高粱單寧含量適中（1.5%-2.0%），通過傳統醬香工藝發酵形成茅臺酒特有的芳香類風味物質。這些物質的形成與當地高粱原料及特殊的地域微生物群系密切相關。也是茅臺酒幽雅細膩、回味悠長的重要因素。<br>至於為何要兩次投料，季克良曾解釋說：是順應了自然條件設計出來的，因為貴州是山區，山上的糧食要遲一點成熟，山下的糧食，河谷地帶的要早成熟，所以早成熟的部分我們先投下去，然後山上成熟了第二次投料。<br><img src="https://zn-image.oss-cn-shenzhen.aliyuncs.com/supplychain-dev/test/articleEdit/s42CrmRRfP.jpg" style="max-width:100%;"><br>紅纓子高粱有著獨特的“謙卑”氣質，相對其他高粱的“牛氣沖天”，它總是保持微微彎腰低頭，像儒家文化的謙謙君子。厚德載物，方為君子，一瓶茅臺酒歷時一年生產、七次精釀、三年貯存、五年出廠。這五年的堅守，如果換算成工作時間，足足有一萬小時，這恰似人生的奮鬥歷程。茅臺酒見證了歷史的重要時刻，也見證著人生的重要時刻。茅臺酒伴隨著百年民族復興，茅臺酒也伴隨著人生的涅槃成長。<br><br>紅纓子高粱所帶來的獨特氣質，造就了茅臺酒的獨特氣質。當我們開啟一瓶茅臺酒，如蘭花之香，香而不豔，幽雅細膩。茅臺酒決無新增，卻富含1000種香味香氣物質，是世界上香味香氣物質最為豐富豐滿的酒品之一。聞香豐富、口感豐滿、回味悠長、留香持久，構成了茅臺酒獨特的產品</p> </body> </html> `; const html = '<p><br>紅纓子高粱，俗稱小紅樑，是赤水河流域特產的一種有機糯高粱。它是茅臺鎮醬香型白酒的關鍵釀酒原料。因不同於其他高粱，粒小、皮厚、堅實、飽滿，紅纓子高粱被形象稱為“沙”。<br><br><br><img src="https://zn-image.oss-cn-shenzhen.aliyuncs.com/supplychain-dev/test/articleEdit/PhbM5hiSHF.jpg" style="max-width:100%;"><br>茅臺酒所代表的醬香酒，有三個獨特工藝特點，都與紅纓子高粱有關。<br><br><br>第一， 茅臺酒兩次投料，其他白酒一年四季都在投料，兩次投料即指紅纓子高粱，謂之“下沙”。<br><br>第二， 茅臺酒生產週期歷時一年，七次精釀，只有紅纓子高粱才能歷經九次蒸煮，謂之“回沙”。<br><br>第三，茅臺酒是整粒高粱參與發酵，約20%破碎率，此類傳統工藝的醬香酒，謂之“坤沙”（整粒之意）。<br><br>紅纓子高粱單寧含量約1.61%，總澱粉含量65%以上，支鏈澱粉含量佔總澱粉含量的88%~93%。<br><img src="https://zn-image.oss-cn-shenzhen.aliyuncs.com/supplychain-dev/test/articleEdit/PkAb7NiBfH.jpg" style="max-width:100%;"><br>紅纓子高粱支鏈澱粉含量高，其截面呈玻璃質地狀，十分有利於回沙工藝的多輪次翻烤，使茅臺鎮醬香型白酒每一輪的營養消耗有一合理範圍。支鏈澱粉(amylopection)又稱膠澱粉,分子相對較大,一般由幾千個葡萄糖殘基組成。支鏈澱粉加熱糊化後，分子中的鏈較為鬆散，因此具有較高的粘度。<br><br>紅纓子高粱單寧含量適中（1.5%-2.0%），通過傳統醬香工藝發酵形成茅臺酒特有的芳香類風味物質。這些物質的形成與當地高粱原料及特殊的地域微生物群系密切相關。也是茅臺酒幽雅細膩、回味悠長的重要因素。<br>至於為何要兩次投料，季克良曾解釋說：是順應了自然條件設計出來的，因為貴州是山區，山上的糧食要遲一點成熟，山下的糧食，河谷地帶的要早成熟，所以早成熟的部分我們先投下去，然後山上成熟了第二次投料。<br><img src="https://zn-image.oss-cn-shenzhen.aliyuncs.com/supplychain-dev/test/articleEdit/s42CrmRRfP.jpg" style="max-width:100%;"><br>紅纓子高粱有著獨特的“謙卑”氣質，相對其他高粱的“牛氣沖天”，它總是保持微微彎腰低頭，像儒家文化的謙謙君子。厚德載物，方為君子，一瓶茅臺酒歷時一年生產、七次精釀、三年貯存、五年出廠。這五年的堅守，如果換算成工作時間，足足有一萬小時，這恰似人生的奮鬥歷程。茅臺酒見證了歷史的重要時刻，也見證著人生的重要時刻。茅臺酒伴隨著百年民族復興，茅臺酒也伴隨著人生的涅槃成長。<br><br>紅纓子高粱所帶來的獨特氣質，造就了茅臺酒的獨特氣質。當我們開啟一瓶茅臺酒，如蘭花之香，香而不豔，幽雅細膩。茅臺酒決無新增，卻富含1000種香味香氣物質，是世界上香味香氣物質最為豐富豐滿的酒品之一。聞香豐富、口感豐滿、回味悠長、留香持久，構成了茅臺酒獨特的產品</p>' //模組聲名並匯出 export default class extends React.Component { //渲染 render() { return ( <View style=

相關推薦

React Native 原生RN巢狀webView，並自適應高度

import React, { Component } from 'react'; import { StyleSheet, View, Dimensions, Text } from 'react-native'; const { width, height } = Dim

DIV巢狀時外層無法自適應高度三種解決方案

http://developer.51cto.com/art/201009/225428.htm 這裡向大家描述一下解決DIV巢狀時外層（父層）無法自適應高度的方法，原本自己寫的CSS程式碼是沒有錯誤的，但是為什麼在新版的瀏覽器中會發現使用DIV巢狀時外層（父層）無法自

在Fragment中巢狀Webview，第一次開啟閃屏問題

在Fragment中巢狀Webview，特別是對Activity開啟了硬體加速，在第一次開啟時會出現閃屏，或者出現下桌面後就恢復正常，第二次就不會出現。 對於這種情況很簡單，在存放Fragment的Activity中加入一行程式碼即可解決： getWindow().se

iOS cell巢狀webView，準確計算高度！

第一步：給webview新增kvo監聽content size [self.webView.scrollViewaddObserver:selfforKeyPath:@"contentSize"o

vue-router中定義動態路由、巢狀路由，並動態獲取引數

路由的定義，主要有以下幾步： 如果是模組化機制，需要呼叫 Vue.use(VueRouter) 定義路由元件，如： const Foo = { template: '<div>foo</div>' }; 定義路由（陣列）：

listview巢狀gridview，並實現grid元素部分顯示以及點選展開與摺疊

有時我們需要用GridView顯示目錄列表，有時甚至是二級的，即listview每一個item裡面又各自嵌入一個gridview，但是當二級目錄（資料條目）的數量過多時，介面會比較臃腫，這時我們就想要有類似展開與摺疊的效果，作者採用的策略是資料分段的分別顯示，其中對於顯示邊

搞清Image加載事件(onload)、加載狀態(complete)後，實現圖片的本地預覽，並自適應於父元素內

斷圖 idt ont election href this 出現 alpha ole onload與complete介紹 complete只是HTMLImageElement對象的一個屬性，可以判斷圖片加載完成，不管圖片是不是有緩存；而onload則是這個Image對象的

[置頂] RecyclerView實現瀑布流，圖片自適應高度

話不多說，先上效果圖 對於RecyclerView，相信大家都不陌生了，這個集listView，GridView，瀑布流效果與一身強大控制元件，漸漸地滲透在每個App.... 還是回到正題，如何讓RecyclerView裡的圖片自適應高度？ 我們知道，要讓RecyclerView有瀑布流效果，R

RecyclerView實現瀑布流，圖片自適應高度

話不多說，先上效果圖 對於RecyclerView，相信大家都不陌生了，這個集listView，GridView，瀑布流效果與一身強大控制元件，漸漸地滲透在每個App.... 還是回到正題，如何讓RecyclerView裡的圖片自適應高度？ 我們知道，要讓Recycler

react native 原生頁面跳轉到React頁面，react頁面回退到原生頁面實現。

1.最新實現方式，只要繼承ReactActivity，重寫getMainComponentName()方法。內部已實現。2.以前實現方式，實現DefaultHardwareBackBtnHandler介面，在ReactInstanceManager 設定DefaultHard

android ScollView 巢狀 WebView 底部空白，高度無法自適應解決

對技術感興趣的同鞋加群 544645972 一起交流。 最近要做一個頁面，需要 ScrollView 巢狀 WebView，怎麼巢狀，怎麼解決焦點和 touch 事件衝突，網上一大堆，這裡就不贅述了，但是發現 WebView 從一個高度很高的網頁載入一個高度很

安卓原生巢狀網頁，呼叫vue裡面的函式，進行互動

剛好遇到這個問題，便轉發了這篇部落格：https://blog.csdn.net/jhl122/article/details/79151303   之前寫過一個部落格是安卓原生與JS互動的部落格：http://blog.csdn.net/jhl122/article/detail

ScrollView 巢狀webview 高度失調 等項關設定，點選攔截

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" androi

React-Native 原生跳轉不同的RN介面的實現思路

最近在研究React-Native開發App，準備把RN運用到自己的畢業設計中，因為以前做過一個購物社交類的App,但是沒有做完，所以就想把它完善一下作為畢業設計，而RN可以熱更新，所以對於購物類app中的一些時常變化的商品介紹列表就準備用一下RN來試試了。

關於viewPager巢狀viewPager，切換上層fragment內層fragment不顯示的問題

最近遇到個問題，兩個viewPager巢狀，切換外層的Fragment的時候，內層的fragment不顯示內容， 解決方法： 設定第二個viewPager的adapter時，FragmentManager應使用getChildFragmentManager，例：

python關於字典巢狀字典，列表巢狀字典根據值進行排序

python 對於字典巢狀字典， 列表巢狀字典排序 例：列表巢狀自字典：d = [{"name": '張三', 's': 68}, {'name': '李四', 's': 97}] 對於列表巢狀字典可以使用python的sorted()方法，也可以使用list的sort()方法： sorted方法可接受

ScrollView巢狀EditText，導致EditText顯示多行時滑動失效的問題

ScrollView巢狀EditText，這會有什麼問題呢，我這裡說的是當EditText內輸入多行內容，當EditText所在佈局不夠的時候，必然需要滑動檢視輸入的所有內容。可是當我們把EditText放在ScrollView裡面的時候，會發現EditText的滑動失效了。 原因就

基於React Native封裝的資訊頻道TopBar，常見於新聞客戶端react-native-scrollable-topbar

react-native-scrollable-topbar 基於React Native封裝的資訊頻道TopBar，常見於新聞客戶端，具體實現功能如下： TopBar區域可手動滑動(Underline 聯動) 點選頻道實現內容區切換 根據內容區(this.p

巢狀事務，預設事務傳播機制測試總結PROPAGATION_REQUIRED

這裡應用的是預設事務傳播機制而且是基於註解形式的。 1.新增@Transactional註釋即可進行事務異常回滾，如果需要try{}catch必須try{}catch後丟擲異常否則不會回滾 2.巢狀事務，內部異常，內外都回滾 3.巢狀事務，外部異常，內外都回滾 4.巢狀事務，外部異常try{

React Native中Navigator的基本使用，實現簡單的頁面之間的跳轉和頁面資料傳遞

效果如下：很簡單的例子，大佬勿噴啊...           點選檢視多少錢後，自動跳轉到超市頁面，點選回答價格後，自動跳轉回顧客介面，並傳遞引數回去。   在我使用的0.57.0的版本中，Navigator已被移除，