안녕하세요. 질문글 하나 올립니다.

Question

안녕하세요. 질문글 하나 올립니다.

HoYeongSong opened this issue 5 years ago · comments

안녕하세요. 올려주신 모듈 잘 사용하고 있습니다. 현재 기능은 다 잘 작동을 하는데 특정 글에서 공유하기 버튼을 눌러 카카오톡으로 카카오링크를 보낸 후에 '앱으로보기' 버튼을 누르면 특정 글로 다시 들어가는 것이 아니라 어플 메인화면이 뜨는데요. 이 부분을 혹시 어떤식으로 구현해야하는 지 알려주실 수 있나요?

type LinkObject={
webURL? :string, //optional
mobileWebURL? :string, //optional
androidExecutionParams?:string, //optional For Linking URL
iosExecutionParams? :string, //optional For Linking URL
};

이 부분에서 androidExecutionParams 값을 찾고 있는데 계속 막혀서 여기까지 글을 올리게 됐습니다.

답변 기다리고 있겠습니다..감사합니다.

Taehoon Seo · Answer 1 · Wed Feb 27 2019 11:23:20 GMT+0800 (China Standard Time)

안녕하세요. 질문주셔서 감사합니다.
질문 내용은 링크를 통해 보낸 글을, '앱에서 보기' 와 같은 버튼을 눌러
'상세페이지' 로 navigate 하는 것으로 볼 수 있습니다.

먼저 예시로,
1.exampleapp이라는 스키마를 가진 앱에서,
2.리스트에서 id 값이 3인 게시물을 카카오링크하고
3.카카오 링크를 받은 사용자는 링크를 눌러서 id가 3 게시물을 본다고 가정하겠습니다.

여기서 필요한것은 카카오 링크를 생성할때
androidExecutionParams, iosExecutionParams에 id=3 이라는 쿼리 스트링형태의 값을 넣으셔야 합니다.
예시는 아래와 같습니다.

const link ={
      androidExecutionParams : 'id=3',
      iosExecutionParams : 'id=3',
  };

이렇게 생성된 카카오 링크는
exampleapp://somepath?id=3 과 같은 url을 가지고 앱 메인화면을 로드하게 됩니다.
따라서 메인 컴포넌트는 url값을 보고, id=3 과 같은 param이 있는지 체크하고,
있다면 상세페이지로 route 해야합니다.

구현은 ios와 android 플랫폼 사이에 약간의 차이가 있습니다.

componentDidMount(){
    if (Platform.OS === 'android') { //안드로이드는 아래와 같이 initialURL을 확인하고 navigate 합니다.
      Linking.getInitialURL().then(url => {
        if(url) this.navigate(url); //
      });
    }else{ //ios는 이벤트리스너를 mount/unmount 하여 url을 navigate 합니다.
      Linking.addEventListener('url', this.handleOpenURL);
    }
  }
  componentWillUnmount() { 
    Linking.removeEventListener('url', this.handleOpenURL);
  }
 handleOpenURL = (event) => { //이벤트 리스너.
    this.navigate(event.url);
 }

navigate는 url을 파싱하고 route하는 메소드로 이루어집니다.

navigate = (url) =>{
    console.log(url); // exampleapp://somepath?id=3
    const paths = url.split('?'); // 쿼리스트링 관련한 패키지들을 활용하면 유용합니다.
    if(paths.length>1){ //파라미터가 있다
      const params= paths[1].split('&');
      let id;
      for(let i=0; i<params.length; i++){
        let param = params[i].split('=');// [0]: key, [1]:value
        if(param[0] ==='id'){
          id=Number(param[1]);//id=3
        }
      }
    //id 체크 후 상세페이지로 navigate 합니다.
    }
  }

제생각에는 이 코드는 최상위 레벨의 컴포넌트에 넣는것이 가장 좋을 것 같네요.. 헤더나, 탭바 같은..?
예를들어 앱이 새로 실행되는것이 아니라 다른 페이지를 보고있다가 앱 링크를 누른경우,
로딩화면과 같은 컴포넌트의 위 코드가 실행될 일이 없기 때문입니다.

dovekr · Answer 2 · Wed Feb 27 2019 11:30:53 GMT+0800 (China Standard Time)

안녕하세요. 질문주셔서 감사합니다.
질문 내용은 링크를 통해 보낸 글을, '앱에서 보기' 와 같은 버튼을 눌러
'상세페이지' 로 navigate 하는 것으로 볼 수 있습니다.

먼저 예시로,
1.exampleapp이라는 스키마를 가진 앱에서,
2.리스트에서 id 값이 3인 게시물을 카카오링크하고
3.카카오 링크를 받은 사용자는 링크를 눌러서 id가 3 게시물을 본다고 가정하겠습니다.

여기서 필요한것은 카카오 링크를 생성할때
androidExecutionParams, iosExecutionParams에 id=3 이라는 쿼리 스트링형태의 값을 넣으셔야 합니다.
예시는 아래와 같습니다.
const link ={
      androidExecutionParams : 'id=3',
      iosExecutionParams : 'id=3',
  };
이렇게 생성된 카카오 링크는
exampleapp://somepath?id=3 과 같은 url을 가지고 앱 메인화면을 로드하게 됩니다.
따라서 메인 컴포넌트는 url값을 보고, id=3 과 같은 param이 있는지 체크하고,
있다면 상세페이지로 route 해야합니다.

구현은 ios와 android 플랫폼 사이에 약간의 차이가 있습니다.
componentDidMount(){
    if (Platform.OS === 'android') { //안드로이드는 아래와 같이 initialURL을 확인하고 navigate 합니다.
      Linking.getInitialURL().then(url => {
        if(url) this.navigate(url); //
      });
    }else{ //ios는 이벤트리스너를 mount/unmount 하여 url을 navigate 합니다.
      Linking.addEventListener('url', this.handleOpenURL);
    }
  }
  componentWillUnmount() { 
    Linking.removeEventListener('url', this.handleOpenURL);
  }
 handleOpenURL = (event) => { //이벤트 리스너.
    this.navigate(event.url);
 }
navigate는 url을 파싱하고 route하는 메소드로 이루어집니다.
navigate = (url) =>{
    console.log(url); // exampleapp://somepath?id=3
    const paths = url.split('?'); // 쿼리스트링 관련한 패키지들을 활용하면 유용합니다.
    if(paths.length>1){ //파라미터가 있다
      const params= paths[1].split('&');
      let id;
      for(let i=0; i<params.length; i++){
        let param = params[i].split('=');// [0]: key, [1]:value
        if(param[0] ==='id'){
          id=Number(param[1]);//id=3
        }
      }
    //id 체크 후 상세페이지로 navigate 합니다.
    }
  }
제생각에는 이 코드는 최상위 레벨의 컴포넌트에 넣는것이 가장 좋을 것 같네요.. 헤더나, 탭바 같은..?
예를들어 앱이 새로 실행되는것이 아니라 다른 페이지를 보고있다가 앱 링크를 누른경우,
로딩화면과 같은 컴포넌트의 위 코드가 실행될 일이 없기 때문입니다.

몇일째 해답을 찾지 못했었는데 진심으로 감사드립니다..!! 정말 감사합니다!

dovekr · Answer 3 · Sun Mar 03 2019 17:29:46 GMT+0800 (China Standard Time)

말씀하신대로 해봤는데 여전히 해결을 못하고 있습니다..ㅠㅠ 제가 혹시 실수한 부분이 있을까요?

일단 어플이 처음 실행되는 index.js 부분에

componentDidMount() {
if (Platform.OS === "android") {
//안드로이드는 아래와 같이 initialURL을 확인하고 navigate 합니다.
Linking.getInitialURL().then(url => {
if (url) this.navigate(url); //
});
} else {
//ios는 이벤트리스너를 mount/unmount 하여 url을 navigate 합니다.
Linking.addEventListener("url", this.handleOpenURL);
}
}
componentWillUnmount() {
Linking.removeEventListener("url", this.handleOpenURL);
}
handleOpenURL = event => {
//이벤트 리스너.
this.navigate(event.url);
};

navigate = url => {
console.log(url); // exampleapp://somepath?id=3
const paths = url.split("?"); // 쿼리스트링 관련한 패키지들을 활용하면 유용합니다.
if (paths.length > 1) {
//파라미터가 있다
const params = paths[1].split("&");
let id;
for (let i = 0; i < params.length; i++) {
let param = params[i].split("="); // [0]: key, [1]:value
if (param[0] === "id") {
id = Number(param[1]); //id=3
}
}
//id 체크 후 상세페이지로 navigate 합니다.
}
};

이렇게 넣었구요!

카카오링크 모듈을 조금 수정해서

const linkObject = {
webURL: "https://developers.kakao.com/docs/android/kakaotalk-link", //optional
mobileWebURL: "https://developers.kakao.com/docs/android/kakaotalk-link", //optional
androidExecutionParams: "id=3", //optional For Linking URL
iosExecutionParams: "shopId=1&itemId=24" //optional For Linking URL
};

이런식으로 해놨는데 카카오링크를 누르면 어플 메인화면까지만 가고 그 뒤로는 잘 안되네요..ㅠ 혹시 제가 잘못 이해한 부분이 있을까요?

Taehoon Seo · Answer 4 · Sun Mar 03 2019 19:20:06 GMT+0800 (China Standard Time)

navigate = (url) =>{
    console.log(url); // exampleapp://somepath?id=3
    const paths = url.split('?'); // 쿼리스트링 관련한 패키지들을 활용하면 유용합니다.
    if(paths.length>1){ //파라미터가 있다
      const params= paths[1].split('&');
      let id;
      for(let i=0; i<params.length; i++){
        let param = params[i].split('=');// [0]: key, [1]:value
        if(param[0] ==='id'){
          id=Number(param[1]);//id=3
        }
      }
 //id 체크 후 상세페이지로 navigate 합니다. <- 이 부분 구현을 깜빡하신것 같습니다!
if(id&& id>-1){
   this.props.navigation.push("DetailPage" , { item_id : id });
}
// 위와 같이 부분에 상세페이지로 렌더링하는 함수를 직접 구현하셔야 합니다 :D
// 이 코드는 react-navigation 을 사용할 경우 예시 코드입니다. 
// id 값이 있는지 확인하고 원하는 페이지로 route 혹은 rendering 하시면 됩니다.
    }
  }

dovekr · Answer 5 · Sun Mar 03 2019 19:21:39 GMT+0800 (China Standard Time)

아..그렇군요! 제가 잘 몰라서 질문이 너무 많았네요.. 진심으로 감사드립니다! :)