React Native Webview 加载本地html

时间:2024-05-31 10:20:37

https://reactnative.cn/docs/webview/#injectedjavascript  官网webview介绍

https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md  这个是安装webview

https://blog.****.net/sunshinezx8023/article/details/80702443   借鉴这个

下面是代码:

官网没有介绍加载本地的,这里介绍一下,

主要的一个是Android情况,首先html要放到Android文件夹中的assets文件夹中,如果没有创建一下,重要的是要在这个RN项目对应的保存一个一样的文件,看下个图

React Native Webview 加载本地html

代码比较简单

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, ListView, Image, TouchableOpacity} from 'react-native';
import {WebView} from "react-native-webview";

export default class webviewmap extends Component {

    //
    // render() {
    //     // 这个是加载网页
    //     // return (
    //     //     <WebView
    //     //         source={{ uri: "https://www.baidu.com" }}
    //     //     />
    //     // )
    //     return (
    //         <WebView
    //             // 这个是加载本地,但是如何直接加载一个本地的html呢????????
    //             originWhitelist={['*']}
    //             source={{ html: '<h1>Hello world</h1>' }}
    //         />
    //     );
    // }

    constructor(props) {
        super(props);
        this.state = {
            baseUrl: (Platform.OS === 'ios') ? {uri: './FMDemoBaseMap/FMMapBasic.html'} : {uri: 'file:///android_asset/FMDemoBaseMap/FMMapBasic.html'}
            //  baseUrl: (Platform.OS === 'ios') ? {uri: './page/index.html'} : {uri: 'file:///android_asset/page/index.html'}
        }

    }

    render() {
        return (
            <WebView source={this.state.baseUrl}
                     javaScriptEnabled={true}
            />
        )
    }

}