Problem
React-Native에서 WebView1를 이용할 경우 (특히 안드로이드에서) Intent가 동작하지 않는 경우가 있다. 대표적으로 많이 사용하는 카카오링크 공유하기 기능을 사용할 때 카카오 JavaScript SDK에서는Intent로 카카오 링크를 전송하는데 WebView에 이 기능이 구현 되있지 않으면 아래와 같은 net::ERR_UNKNOWN_URL_SCHEME 에러 메시지를 보게 될 것이다.
Solution
React-Native에서는 이를 해결하기 위해서는 먼저 react-native-send-intent2 를 설치해야 한다.
npm install react-native-send-intent --save
yarn add react-native-send-intent
그리고 프로젝트와 연결 해준다.
react-native link react-native-send-intent
const onShouldStartLoadWithRequest = (event) => {
if (
event.url.startsWith('http://') ||
event.url.startsWith('https://') ||
event.url.startsWith('about:blank')
) {
return true;
}
if (Platform.OS === 'android') {
const SendIntentAndroid = require('react-native-send-intent');
SendIntentAndroid.openChromeIntent(event.url)
.then(isOpened => {
if (!isOpened) { alert('앱 실행이 실패했습니다'); }
})
.catch(err => {
console.log(err);
});
return false;
} else {
Linking.openURL(event.url)
.catch(err => {
alert('앱 실행이 실패했습니다. 설치가 되어있지 않은 경우 설치하기 버튼을 눌러주세요.');
});
return false;
}
};
/>
<WebView
onShouldStartLoadWithRequest={event => {
return onShouldStartLoadWithRequest(event);
}}
...
/>
react-native-send-intent는 그 외에도 카메라 앱이나 이메일 앱 또는 다운로드 매니저 같은 외부 앱을 실행할 수 있어서 유용하다3.
