【React native】Webview的使用
阿新 • • 發佈：2019-02-05
使用WebView的方法：
1、申明WebView變數
2、呼叫方法有兩種：
（1）使用介面對接、
（2）直接使用url方式把內容全部取下來
3、使用url呈現的方式如下
問題處理方法及結果：
1、使用如下官方案例程式碼：
'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, WebView, } from 'react-native'; var html = '<!DOCTYPE html><html><body><h1>This is a heading!</body></html>'; var HelloWorld = React.createClass({ render: function() { return ( <View style={styles.container}> <WebView source={{html: html}}/> </View> ); }, }); var styles = StyleSheet.create({ container:{ backgroundColor:'#00ff00', height:200, width:300, flex:1, } }); AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
如下是結果：
3、第三部、將官方案例程式碼放入到自己的程式碼中、檢視可否執行
var React = require('react-native'); var Util = require('./../common/util'); var ServiceURL = require('./../common/service'); var PublicItem = require('./public_item'); var Header = require('./../common/header'); var HTMLView = require('react-native-htmlview') var { StyleSheet, Text, View, ListView, Image, ScrollView, TouchableOpacity, WebView } = React; var html = '<!DOCTYPE html><html><body><h1>This is a heading!</body></html>'; module.exports = React.createClass({ getInitialState: function() { return { data: null }; }, render: function() { return ( // <ScrollView style={styles.m10}> // { this.state.data ? <View> <Header navigator={this.props.navigator} initObj={{ backName: '主頁', title: '輿情詳情' }}/> <PublicItem row={this.state.data}/> <View style={styles.container}> <WebView // source={{html: this.state.data.content}} source={{html: html}} // source={{url: 'http://120.26.216.13:6080/yql/ws/contentdetail?uuid=9678940aeb2203c8542bfa6de01863b2'}} /> </View> <View style={[styles.row,{marginTop:10}]}> <Text style={[styles.title]}>來源：搜狗新聞</Text> <Text style={[styles.pages]}>點選：27</Text> <Text style={[styles.pages]}>轉發：88</Text> <Text style={[styles.pages]}>評論：4</Text> <Text style={[styles.pages]}>this.state.content</Text> </View> <View> <Text style={[styles.title]}>相似輿情</Text> <Text style={[styles.text]}>江蘇科技大學：青春青春青春青春大賽</Text> <Text style={[styles.text]}>江蘇科技大學：青春青春青春青春大賽</Text> <Text style={[styles.text]}>江蘇科技大學：青春青春青春青春大賽</Text> <Text style={[styles.text]}>江蘇科技大學：青春青春青春青春大賽</Text> <Text style={[styles.text]}>江蘇科技大學：青春青春青春青春大賽</Text> </View> <View style={{height:100}}></View> </View> : Util.loading // } // </ScrollView> ); }, componentDidMount: function() { var uuid = this.props.id; var that = this; var url = ServiceURL.public_detail + '?uuid=' + uuid; Util.get(url, function(data) { that.setState({ data: data.detail }); }, function(err) { alert(err); }); } }); var styles = StyleSheet.create({ container:{ backgroundColor:'#00ff00', height:200, width:300, flex:1, }, m10: { flex: 1 }, title: { fontSize: 16, marginLeft: 10, marginTop: 10, marginBottom: 10 }, text: { marginLeft: 10, marginRight: 10, color: '#666666' }, webviewContent: { height:500 }, pages: { marginLeft: 30, color: '#A7A0A0' }, row: { flexDirection: 'row' }, });
樣式如下：說明沒有任何問題：
繼續查原因、對比官方文件和自己程式碼的差異、發現官方程式碼中webview是巢狀在view中的、所以問題就出在我之前的程式碼webview在外層沒有巢狀在view中
繼續測試、把程式碼模組化、
<View style={styles.container}> <WebView source={{html: this.state.data.content}} // source={{html: html}} // source={{url: 'http://120.26.216.13:6080/yql/ws/contentdetail?uuid=9678940aeb2203c8542bfa6de01863b2'}} /> </View>
最重結果、nice
