React Native WebView使用本地HTML文件

最新推荐文章于 2021-06-29 07:42:57 发布

原创最新推荐文章于 2021-06-29 07:42:57 发布 · 919 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

react-native 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在React Native应用中使用WebView组件加载本地HTML文件。通过示例代码展示了从本地文件系统读取HTML内容并将其显示在WebView中的过程。

React Native WebView使用本地HTML文件

这里注意本地的文件路径为：http://localhost:8081/iosPages/b.html

HTML文件 /iosPages/b.html：

<h1>this is a html file</h1>
<p>this is content hello </p>

JS文件：

'use strict';
var React = require('react-native');
var {
  StyleSheet,
  Text,
  View,
  WebView,
} = React;

var App = React.createClass({
  getInitialState: function () {
    return ({
        content: '',
    });
  },
  render: function() {
    return (
      <View style={{flex:1, marginTop:60}}>
        <WebView html={this.state.content} automaticallyAdjustContentInsets={false} />
      </View>
    );
  },
  componentDidMount: function () {
    let url = 'http://localhost:8081/iosPages/b.html';
    fetch(url)
      .then((response) => response.text())
      .then((responseText) => {
        this.setState( {content: responseText});
      })
      .catch((error) => {
        console.warn(error);
      });
  },

});

module.exports = App;