react-native-webview (웹뷰)에서 카드 결제 또는 외부앱 실행하기

Android 에서 react-native-webview (웹뷰) 카드 결제 또는 외부앱 실행하기

 

 

1. react-native-send-intent 라이브러리를 이용해 인텐트 호출

- install

npm install react-native-send-intent --save 
react-native link react-native-send-intent

 

2. android/setting.gradle 파일에 아래의 코드를 추가

include ':RNSendIntentModule', ':app' 
project(':RNSendIntentModule').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-send-intent/android')

 

3. android/app/build.gradle 파일에 아래의 코드를 추가

dependencies { 
	... 
    compile project(':RNSendIntentModule') 
}

 

4. node_modules/react-native-send-intent/android/src/main/java/com/burnweb/rnsendintent/RNSendIntentModule.java 파일에 아래 소수를 추가한다.

 

@ReactMethod 
public void openAppWithUri(String intentUri, ReadableMap extras, final Promise promise) { 
	try { 
    	Intent intent = Intent.parseUri(intentUri, Intent.URI_INTENT_SCHEME); 
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); 
        Intent existPackage = this.reactContext.getPackageManager().getLaunchIntentForPackage(intent.getPackage()); 
        
        if (existPackage != null) { 
        	this.reactContext.startActivity(intent); 
        } else { 
        	Intent marketIntent = new Intent(Intent.ACTION_VIEW); 
            marketIntent.setData(Uri.parse("market://details?id="+intent.getPackage())); 
            marketIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); 
            this.reactContext.startActivity(marketIntent); 
        }
        promise.resolve(true); 
	} catch (Exception e) { 
    	promise.resolve(false); 
    } 
 }

 

5. node_modules/react-native-send-intent/index.js 에 아래 소스를 추가한다.

openAppWithUri(intentUri, extras) { 
	return RNSendIntentAndroid.openAppWithUri(intentUri, extras || {}); 
}

 

 

6. react-native 웹뷰 페이지

안드로이드의 경우 RN webview 내에서 onShouldStartLoadWithRequest 메소드를 이용해 url 바뀔때마다 감지해서 http, https 외의 외부 앱 호출일 경우 react-native-send-intent 등 외부 라이브러리를 이용해 인텐트 호출

 

import SendIntentAndroid from 'react-native-send-intent';
....


const onNavigationStateChange = (webview) => {

	if (webview.url.startsWith('http://') || webview.url.startsWith('https://') || webview.url.startsWith('about:blank')) {
		//console.log("url :" + webview.url);
		return true;
	}

	if (Platform.OS === 'android') {
		LinkingAndroid.canOpenURL(webview.url).then(res => {
			if (res) {
				LinkingAndroid.openURL(webview.url);
			} else {
				SendIntentAndroid.openChromeIntent(webview.url).then(res => {
					if (!res) {
						console.log('앱 실행에 실패했습니다. 앱이 설치되어있는지 확인하세요');
					}
				})
			}
		})
	} else {
		Linking.openURL(webview.url).catch(err => {
			console.log('앱 실행에 실패했습니다. 앱이 설치되어있는지 확인하세요');
		});
	}

	return false;	
		
};

<WebView 
	source={{uri: "도메인"}} 
	originWhitelist={['*']}
	scrollEnabled={false} 
	injectedJavaScript={patchPostMessageJsCode}
	javaScriptEnabled = {true} 
	startInLoadingState={true}		
	onShouldStartLoadWithRequest={(webview) => onNavigationStateChange(webview)} //for iOS
	onNavigationStateChange={(webview) => onNavigationStateChange(webview)}	//for Android
	ref={webview}
/>