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项目对应的保存一个一样的文件,看下个图
代码比较简单
/**
* 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}
/>
)
}
}