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 (
    <>
      {
          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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

备注

请使用自己的key值，到腾讯地图官网去申请

想要下载react-native-webview
npm install react-native-webview
1
2
3
4

腾讯地图选点组件官网

react-native-webview