panhui
/
Dingdong_client


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
							import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import {
  Div,
  Button,
  Image,
  Text,
  Avatar,
  Icon,
  Input,
} from 'react-native-magnus';
import { Appbar } from 'react-native-paper';
import { ScrollView } from 'react-native-gesture-handler';
import { WebView } from 'react-native-webview';

import useModel from 'flooks';
import User from '../../flooks/User'; // detail模块通用方法

import Header from '../../components/Header';

import { alert } from '../../Utils/TotastUtils';

export default function MapScreen({ navigation }) {
  const key = 'c4faf80125b298f93bbc1477db10e69c';
  const html = `
<head lang="zh-CN">
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="address=no">
	<script type="text/javascript"
		src="https://3gimg.qq.com/lightmap/components/locationPicker2/js/main-62c2e3b971.js"></script>
	<title>locationPicker Components Demo - iframe</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body,
		html {
			overflow: hidden;
		}
	</style>

</head>

<body>
	<!-- 通过 iframe 嵌入地图选点组件 -->
	<iframe id="iframe" style="width:100vw;height:100vh" frameborder=0 scrolling="no"
		src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=GLFBZ-ZR2W6-76XSA-MF7CQ-GDJ6Z-6FB5K&referer=Dingdong">
	</iframe>

	<script>

		window.addEventListener('message', function (event) {
			var loc = event.data;
			window.ReactNativeWebView.postMessage(JSON.stringify(loc))
		}, false);


	</script>
</body>
	`;
  return (
    <>
      <StatusBar backgroundColor="#fff" style="dark" translucent />

      <Appbar.Header
        theme={{ colors: { primary: '#fff' } }}
        style={{
          elevation: 0,
          shadowOffset: {
            width: 0,
            height: 0,
          },
          shadowOpacity: 0,
          zIndex: 2,
        }}
      >
        <Appbar.BackAction onPress={navigation.goBack} />
        <Appbar.Content
          title="选择收货地址"
          titleStyle={{ textAlign: 'center', fontSize: 16 }}
        />
        <Div w={56} h={56} />
      </Appbar.Header>
      <WebView
        source={{
          html,
        }}
        style={{ flexGrow: 1, width: '100%' }}
        onMessage={({ nativeEvent }) => {
          const info = JSON.parse(nativeEvent.data);
          console.log(info);
          alert('', `您当前选择的是:${info.poiaddress}`, () => {
            navigation.goBack();
          });
        }}
      />
    </>
  );
}