react native中如何使用webView调用腾讯地图选点组件
- 效果示例图
- 代码示例
- 备注
效果示例图
代码示例
import React, {useEffect, useRef, useState} from 'react';
import {Modal, StyleSheet} from 'react-native';
import {pxToPd} from '../../common/js/device';
import {WebView} from 'react-native-webview';
const TestWebView = () => {
const webViewRef = useRef(null);
const [address, setAddress] = useState(null);
useEffect(() => {
return () => {};
}, []);
return (
<>
<WebView
ref={webViewRef}
javaScriptEnabled={true}
source={{
uri: 'https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=KUXBZ-F7P6D-IVF4W-H2L5A-LSX35-4NBX2&referer=myapp',
}}
onMessage={event => {
let addressMsg = JSON.parse(event.nativeEvent.data);
console.log('[miao]', addressMsg);
console.log('[miao]', addressMsg?.poiaddress);
setAddress(() => addressMsg?.poiaddress);
}}
onLoadEnd={() => {
webViewRef.current.injectJavaScript(
"window.addEventListener('message', function(event) {window.ReactNativeWebView.postMessage(JSON.stringify(event.data));}, false);",
);
}}
/>
</>
);
};
const styles = StyleSheet.create({});
export default TestWebView;
备注
请使用自己的key值,到腾讯地图官网去申请
想要下载react-native-webview
npm install react-native-webview
腾讯地图选点组件官网
react-native-webview