react-daum-postcode/src/app.native.tsx at 4dad5d76472266922607ad70fe9fc4e7343ff4be · actbase/react-daum-postcode · GitHub

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import * as React from 'react';

import WebView from 'react-native-webview';
import { PostcodeProps } from './types';
import { Linking, View } from 'react-native';

const html = `
<!DOCTYPE html>
<html lang="ko">
<head>
	<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">
	<style>
	  * { box-sizing: border-box }
	  html, body { width: 100%; height: 100%; margin:0px; padding: 0px; background-color: #ececec; }
  </style>
</head>
<body>
	<div id="layer" style="width:100%; min-height: 100%;"></div>
	<script type="text/javascript">
    function callback() {
			var element_layer = document.getElementById('layer');
			element_layer.innerHTML = "";
      new daum.Postcode({
        ...window.options,
        onsearch: function () {
          window.scrollTo(0, 0);
        },
        oncomplete: function(data) {
          window.ReactNativeWebView.postMessage(JSON.stringify(data));
        },
        onresize: function(size) {
          document.getElementById('layer').style.height = size.height + 'px';
        },
        onclose: function() {
          callback();
        },
        width : '100%',
        height: '100%',
      }).embed(element_layer);
    }
		function initOnReady(options) {
    	window.options = options;
			var s = document.createElement('script');
			s.type = 'text/javascript'; s.src = 'https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js';
			s.onreadystatechange = callback; s.onload = callback;
			var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    }
	</script>
</body>
</html>
`;

const Postcode: React.FC<PostcodeProps> = (props: PostcodeProps) => {
  const { jsOptions, onSelected, onError, style, ...otherProps } = props;
  const injectedJavaScript = React.useMemo(() => `initOnReady(${JSON.stringify(jsOptions)});void(0);`, [jsOptions]);

  const onMessage = React.useCallback(
    ({ nativeEvent }) => {
      try {
        nativeEvent.data && onSelected && onSelected(JSON.parse(nativeEvent.data));
      } catch (e) {
        onError(e);
      }
    },
    [onSelected],
  );

  return (
    <View style={style}>
      <WebView
        mixedContentMode={'compatibility'}
        androidLayerType="hardware"
        renderToHardwareTextureAndroid={true}
        useWebKit={true}
        {...otherProps}
        source={{ html, baseUrl: 'https://postcode.map.kakao.com' }}
        onMessage={onMessage}
        injectedJavaScript={injectedJavaScript}
        onShouldStartLoadWithRequest={(request) => {
          const isPostcode =
            !request.url?.startsWith('https://postcode.map.kakao.com/guide') &&
            (!request.url?.startsWith('http') ||
              request.url?.startsWith('https://postcode.map.kakao.com') ||
              request.url?.startsWith('http://postcode.map.kakao.com'));
          if (!isPostcode) {
            Linking.openURL(request.url);
            return false;
          } else {
            return true;
          }
        }}
      />
    </View>
  );
};

Postcode.defaultProps = {
  jsOptions: {
    hideMapBtn: true,
  },
};

export default Postcode;