Dingdong_app/map/SearchMapScreen.tsx

/* eslint-disable react/style-prop-object */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { WebView } from "react-native-webview";

import { useMount } from "ahooks";
import { useModel } from "flooks";
import { getLocation } from "../Utils/MapUtils.ts";

export default function SearchMapScreen({ navigation }) {
  const [location, setLocation] = React.useState<any>();
  const { saveLocation } = useModel("userModel");
  const [show, setshow] = React.useState<boolean>(false);
  useMount(() => {
    getLocation().then(res => {
      setLocation(res.location);
      setTimeout(() => {
        setshow(true);
      }, 500);
    });
  });
  return (
    <>
      {show && (
        <WebView
          source={{
            uri: `http://dingdong.izouma.com/map/chooseLocation?location=${location.lat},${location.lng}`,
          }}
          style={{ flexGrow: 1, width: "100%" }}
          onMessage={({ nativeEvent }) => {
            const info = JSON.parse(nativeEvent.data);
            console.log(info);
            saveLocation(
              info.poiaddress + info.poiname,
              info.latlng.lat,
              info.latlng.lng
            );
            navigation.goBack();
          }}
        />
      )}
    </>
  );
}