React Native Webview 加载本地html

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

}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值