React Native Webview 加载本地html

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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.csdn.net/sunshinezx8023/article/details/80702443   借鉴这个

下面是代码：

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

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

代码比较简单

/**
 * 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}
            />
        )
    }
}

以上是 React Native Webview 加载本地html 的全部内容， 来源链接： utcz.com/z/382152.html

回到顶部