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

相关推荐
孤狼warrior4 小时前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫
前端炒粉4 小时前
18.矩阵置零(原地算法)
javascript·线性代数·算法·矩阵
listhi5204 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
华仔啊5 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
CsharpDev-奶豆哥6 小时前
JavaScript性能优化实战大纲
开发语言·javascript·性能优化
yume_sibai9 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书9 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript
西西学代码9 小时前
Flutter---个人信息(1)---实现简单的UI
开发语言·javascript·flutter
嘗_9 小时前
手写自己的小型react
前端·javascript·react.js
洞窝技术10 小时前
前端开发APP之跨平台开发(ReactNative0.74.5)
android·react native·ios