React Native（17）
& & & & 系统自带的WebView控件在默认情况下，是不能自适应高度的，尤其在WebView嵌套在ListView中，WebView展现的是未知的HTML，又不能写死每个item的高度时，那么问题就来了，现将项目中用到的WebViewAutoHeight.js分享如下，可以直接拿来引用。(此程序不受制于HTML中的格式，不用和web端提前约定，minHeight的值不超过最大item值即可)
import React, {Component,propTypes} from 'react';
import {WebView, View, Text} from &react-native&;
const BODY_TAG_PATTERN = /\&\/ *body\&/;
// Do not add any comments to this! It will break because all line breaks will removed for
// some weird reason when this script is injected.
var script = `
;(function() {
var wrapper = document.createElement(&div&);
wrapper.id = &height-wrapper&;
while (document.body.firstChild) {
wrapper.appendChild(document.body.firstChild);
document.body.appendChild(wrapper);
var i = 0;
function updateHeight() {
document.title = wrapper.clientH
window.location.hash = ++i;
updateHeight();
window.addEventListener(&load&, function() {
updateHeight();
setTimeout(updateHeight, 1000);
window.addEventListener(&resize&, updateHeight);
const style = `
body, html, #height-wrapper {
margin: 0;
padding: 0;
#height-wrapper {
const codeInject = (html) =& html.replace(BODY_TAG_PATTERN, style + &&/body&&);
* Wrapped Webview which automatically sets the height according to the
* content. Scrolling is always disabled. Required when the Webview is embedded
* into a ScrollView with other components.
* Inspired by this SO answer /a/
var WebViewAutoHeight = React.createClass({
propTypes: {
source: React.PropTypes.object.isRequired,
injectedJavaScript: React.PropTypes.string,
minHeight: React.PropTypes.number,
onNavigationStateChange: React.PropTypes.func,
style: WebView.propTypes.style,
getDefaultProps() {
return {minHeight: 100};
getInitialState() {
realContentHeight: this.props.minHeight,
handleNavigationChange(navState) {
if (navState.title) {
const realContentHeight = parseInt(navState.title, 10) || 0; // turn NaN to 0
this.setState({realContentHeight});
if (typeof this.props.onNavigationStateChange === &function&) {
this.props.onNavigationStateChange(navState);
render() {
const {source, style, minHeight, ...otherProps} = this.
const html = source.
if (!html) {
throw new Error(&WebViewAutoHeight supports only source.html&);
if (!BODY_TAG_PATTERN.test(html)) {
throw new Error(&Cannot find &/body& from: & + html);
{...otherProps}
source={{html: codeInject(html)}}
scrollEnabled={false}
style={[style, {height: Math.max(this.state.realContentHeight, minHeight)}]}
javaScriptEnabled
onNavigationStateChange={this.handleNavigationChange}
{/*process.env.NODE_ENV !== &production& &&
&Text&Web content height: {this.state.realContentHeight}&/Text&*/}
export default WebViewAutoH
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：14894次
排名：千里之外
原创：45篇
转载：22篇
(3)(3)(7)(5)(4)(1)(1)(5)(3)(3)(4)(4)(8)(1)(1)(1)(2)(2)(2)(1)(1)(1)(2)(1)React Native学习笔记-WebView - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了41832字，被41人关注，获得了61个喜欢
React Native学习笔记-WebView
这该WebView组件进行创建渲染一个原生的WebView，进行加载一个网页
automaticallyAdjustContentInsets bool
设置是否自动调整内容
contentInset
{top:number,left:number,bottom:number,right:number}
设置内容所占的尺寸大小
WebView加载的HTML文本字符串
injectJavaScript
string 当网页加载之前进行注入一段js代码
onError function
方法 当网页加载失败的时候调用
function 方法
当网页加载结束的时候调用
onLoadEnd fucntion 当网页加载结束调用，不管是成功还是失败
onLoadStart
当网页开始加载的时候调用
onNavigationStateChange function方法
当导航状态发生变化的时候调用
renderError
该方法用于渲染一个View视图用来显示错误信息
renderLoagin function
该方法用于渲染一个View视图用来显示一个加载进度指示器
设置加载的网页地址
domStorageEnabled bool
该适合Android平台 该只适合于Android平台，用于控制是否开启DOM Storage（存储）
avaScriptEnabled
该适合于Android平台，是否开启javascript
'use strict';
import React, {Component} from 'react';
AppRegistry,
StyleSheet,
TouchableOpacity,
} from 'react-native';
var DEFAULT_URL = '/ljy';
var RnDemo = React.createClass({
render: function() {
&View style={{flex:1}}&
&Text style={{height:40}}&简单的网页显示&/Text&
&WebView style={styles.webview_style}
source={{uri:DEFAULT_URL}}
startInLoadingState={true}
domStorageEnabled={true}
javaScriptEnabled={true}
&/WebView&
var styles = StyleSheet.create({
webview_style:{
backgroundColor:'#00ff00',
AppRegistry.registerComponent('RnDemo', () =& RnDemo);
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：如何自定义封装一个ReactNativeAndroid&的&NativeModule组件并在JSX中调用
FaceBook的 React Native Android 目前还不能加载 remoteJs
的url方式，但是已经可以通过devPC-ip绑定或本地asserts编译依赖的方式进行打包了，也就是React
基本可以实现了Learn Once,Run everyWhere(暂时即iOS,Andorid,webview)
下面介绍下，如果封装一个NativeModule的方法，类似android-webview的jsbridge方案，让React(或者webview)能够尽可能得使用和获得native的业务能力：
更详细完整教程可参见：
1.首先需要新建并使用自己的packageManager
2.在你的Activitiy或Fragment中对其进行设置
3.Step by Step[按照文档指定步骤进行操作]:
1.Create the ViewManager subclass.
2.Annotate the view properties with @UIProp
3.Implement the createViewInstance method
4.Implement the updateView method
5.Register the manager in createViewManagers of the applications
6.Implement the JavaScript module
4.以新增一个自定义Toast为例
1.继承自ReactContextBaseJavaModule，实现getName用于js前端调用NativeModules.类A，实现含有@ReactMethod的方法用于前端调用类A的xx方法
2.在你自定义的packManager中增加你的NativeModule
3.这样就可以在前端调用了，代码如下：
4.最终的自定义组件封装的调用效果如下图所示：
1.底部的toast就是通过自定义的React组件显示出来的
2.屏幕中的webview也是类似的方法，在JS使用了
如下代码即可
var ToastAndroid = React.NativeModules.MyWebView
## render React.createClass ##
& style={{width: 600,height: 500}}
& url={""}/&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。