[ReactNative] Android Webview KaKaoLink 안드로이드 웹뷰 카카오 공유하기

RN 작업을 할 때마다 느끼는데 정말 좋다 행복해^^

너무 행복해 ^^

성격 좋아지는 것 같다 ^^

Android 4.4부터 Webview가 Chrom에서 Chromium 기반으로 변경되었는데,이건 IntentURL을 지원안한다. 고로 행복하게 작업을 해야한다.

공식 문서 그대로 따라했다간 현재 구현이 안되고,

어느 부분들은 잘못 적혀있어서 블로그에 다시 쓴다.


react-native-send-intent 설치
intent를 지원해주는 npm을 깐다.

npm i react-native-send-intent
yarn add react-native-send-intent

react-native-send-intent는 다른 어플들도 쉽게 열 수 있다.


안드로이드 셋팅
android/settings.gradle

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

android/app/build.gradle

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

android/app/src/main/AndroidManifest.xml

      ...
      <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:host="kakaolink" android:scheme="kakao{네이티브앱키}"/>
      </intent-filter>
      ...



웹뷰 컴포넌트
onShouldStartLoadWithRequest 작성

  const onShouldStartLoadWithRequest = (event: any) => {
    if (Platform.OS === 'android') {
      if (event.url.includes('intent')) {
        SendIntentAndroid.openChromeIntent(event.url)
          .then(isOpened => { // 앱이 열렸을 때
            webViewRef.current.goBack(); // (임시) 이동되고나서, 전에 보던 페이지를 보기 위해
          if (!isOpened) { Alert.alert('앱 실행이 실패했습니다'); }
        })
        .catch(err => {
		console.log(err)
        });
      return true;
      }
    }
    return true;
  };

웹뷰 속성 셋팅

       <View style={{ flex: 1 }}>
        <WebView
          ref={webViewRef}
          originWhitelist={["*"]}
          source={{
            uri,
          }}
          onMessage={onMessage}
          allowsBackForwardNavigationGestures={allowsBackForwardNavigationGesturesChange()}
          onNavigationStateChange={onNavigationStateChange}
          onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
          textZoom={100}
          cacheEnabled={false}
          cacheMode={'LOAD_NO_CACHE'}
          onContentProcessDidTerminate={onContentProcessDidTerminate}
        />
      </View>

여기서
originWhitelist = { [ "*" ] } 은 모든 url을 허용한다는 것이고,
실제 작업할 땐 { [ "kakaolink", "intent", "http", "https" ] } 이런 느낌으로

허용할 애들만 넣어주면 되겠다.

이런 방법 말고 intent: 를 제거해서 url을 바로 열어주는 방법도 있지만,

우리는 값들이 고정된게 아니라, 매번 바뀌기 때문에, intent핸들링을 할 수밖에 없다.

매번 느끼지만 안드로이드는 정말 행복하다. 행복해^^

너무 행복해 ^^

^^

xcode도 행복해 ^^

알엔은 그냥 행복해 ^^