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

相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one1 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲1 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830943 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
gnip4 小时前
JavaScript事件流
前端·javascript
小菜全4 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
wow_DG5 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904275 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路5 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架