1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
| import React, { Component } from 'react' import { WebView, Dimensions, ScrollView } from 'react-native'
const BaseScript = ` (function () { var height = null; function changeHeight() { if (document.body.scrollHeight != height) { height = document.body.scrollHeight; if (window.postMessage) { window.postMessage(JSON.stringify({ type: 'setHeight', height: height, })) } } } setInterval(changeHeight, 100); } ()) `
const HTMLTEXT = `<p id="myContent" style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(247, 150, 70); font-size: 36px;"><strong>大佬让测试商品详情页样式啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(75, 172, 198);"><strong>这个怎么说呢。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(128, 100, 162);"><strong>样式还是需要解析的啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong>如果乱了会被运营打的啊。。<img width="100%" src="http://upload-images.jianshu.io/upload_images/6652326-afa4c73c7fca32ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" title="1505131159299088793.jpeg" alt="photo-1457365050282-c53d772ef8b2.jpeg"/></strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(192, 80, 77);"><strong>运营也会死的很惨啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(79, 129, 189);"><strong>所以让我们试一下吧。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(31, 73, 125);"><strong>如果还是不行。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(146, 205, 220);"><strong>就拿开发祭天。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(178, 162, 199);"><strong>不然。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(217, 150, 148);"><strong>还能怎么样呢。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong><img width="100%" src="http://a.36krcnd.com/nil_class/277e5abe-2f40-41a5-b465-173a551c8d63.jpg" title="1504250661662096451.png" alt="首页banner2.png"/></strong></span></p><p><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(227, 108, 9);"><strong>再来一遍!!!</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(227, 108, 9);"></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(247, 150, 70);"><strong>大佬让测试商品详情页样式啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(75, 172, 198);"><strong>这个怎么说呢。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(128, 100, 162);"><strong>样式还是需要解析的啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong>如果乱了会被运营打的啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(192, 80, 77);"><strong>运营也会死的很惨啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(79, 129, 189);"><strong>所以让我们试一下吧。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(31, 73, 125);"><strong>如果还是不行。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(146, 205, 220);"><strong>就拿开发祭天。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(178, 162, 199);"><strong>不然。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(217, 150, 148);"><strong>还能怎么样呢。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"></span><br/></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong><img width="100%" src="http://upload-images.jianshu.io/upload_images/3510198-c80fd2d06a801e33.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" title="1504250722330056753.png" alt="通栏1.png"/></strong></span></p><p><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong><br/></strong></span><br/></p>`
class RZWebView extends Component { constructor (props) { super(props) this.displayName = 'RZWebView' this.state = ({ height: 0 }) }
/** * web端发送过来的交互消息 */ onMessage (event) { try { const action = JSON.parse(event.nativeEvent.data) if (action.type === 'setHeight' && action.height > 0) { this.setState({ height: action.height }) } } catch (error) { // pass } }
render () { return ( <ScrollView> <WebView injectedJavaScript={BaseScript} style={{ width: Dimensions.get('window').width, height: this.state.height }} automaticallyAdjustContentInsets source={{ html: HTMLTEXT }} decelerationRate='normal' scalesPageToFit javaScriptEnabled // 仅限Android平台。iOS平台JavaScript是默认开启的。 domStorageEnabled // 适用于安卓 scrollEnabled={false} onMessage={this.onMessage.bind(this)} /> </ScrollView> ) } }
RZWebView.navigationOptions = { headerTitle: 'RZWebView' }
export default RZWebView
|