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

相关推荐
威风的虫7 分钟前
JavaScript中的axios
开发语言·javascript·ecmascript
bot55566620 分钟前
“企业微信iPad协议”静默 72 小时:一台被遗忘的测试机如何成为私域的逃生梯
javascript·面试
西洼工作室24 分钟前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
曦曜29244 分钟前
富文本编辑器
javascript
多啦C梦a1 小时前
React 实战:从 setInterval 到 useInterval,一次搞懂定时器 Hook(还能暂停!)
前端·javascript·react.js
闲不住的李先森1 小时前
乐观更新
前端·react.js·设计模式
zhangzelin8881 小时前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript
软件技术NINI1 小时前
html css js网页制作成品——化妆品html+css+js (7页)附源码
javascript·css·html
小小前端_我自坚强2 小时前
Vue 3 使用心得
前端·javascript·vue.js
华仔啊2 小时前
前端真的需要懂算法吗?该怎么样学习?
前端·javascript