react native中如何使用webView调用腾讯地图选点组件

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

相关推荐
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒3 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪3 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背3 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M3 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc3 小时前
学习electron
javascript·学习·electron
想自律的露西西★4 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳4 小时前
vue3:瀑布流
前端·javascript·vue.js
霍先生的虚拟宇宙网络4 小时前
webp 网页如何录屏?
开发语言·前端·javascript
温吞-ing5 小时前
第十章JavaScript的应用
开发语言·javascript·ecmascript