RN+EXPO) DEEP LINKING 사용하기

작성중입니다

1. tabs navigation

const Home = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Main"
        component={HomeScreen}
        options={{
          title: '홈',
          header: () => (
            <View> 
              <Pressable onPress={handleDynamicLink}>
              <Image
                style={{ width: 24, height: 24 }}
                source={require('./assets/common/bell.png')}
              />
              </Pressable>
            </View>
          ),
          headerShown: true,
        }}
      />
      <Tab.Screen
        name="Diagnosis"
        component={DiagnosisScreen}
      />

      <Tab.Screen
        name="PurchaseMobile"
        component={PurchaseMobileScreen}
      />
      <Tab.Screen
        name="CustomService"
        component={CustomServiceScreen}
      />
      <Tab.Screen
        name="Mypage"
        component={MyPageScreen}
      />
    </Tab.Navigator>
  );
};

2. whole navigation

return (
    <RecoilRoot>
      <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
        <NavigationContainer
        linking={isLoggedIn && linking}
        ref={navigationRef}
        >
          <Stack.Navigator
            initialRouteName='Home'
            screenOptions={{
              animation: 'slide_from_right',
              headerShadowVisible: false,
              headerBackImageSource: require('./assets/common/back_arrow.png'),
              headerShown: false,
            }}
          >
            <Stack.Screen
              name="Home"
              component={Home}
            />

             <Stack.Screen name="OnBoarding" component={OnBoarding} />
            <Stack.Screen
              name="AddFamily"
              component={AddFamily}
            />
            <Stack.Screen
              name="AddInternet"
              component={AddInternet}
            />
            <Stack.Screen
              name="internetRegistration"
              component={InternetRegistration}
            />

            <Stack.Screen
              name="detailInternet"
              component={DetailInternet}
            />
            <Stack.Screen
              name="Signup"
              component={SignupPage}
            />
            <Stack.Screen
              name="Certification"
              component={CertificationScreen}
            />
            <Stack.Screen
              name="ChoiceSignMethod"
              component={ChoiceSignMethod}
            />
            <Stack.Screen
              name="CertificationInProgress"
              component={CertificationInProgress}
            />
            <Stack.Screen
              name="CertificationResult"
              component={CertificationResult}
            />
            <Stack.Screen
              name="EmailAndPassword"
              component={EmailAndPassword}
            />
            <Stack.Screen
              name="Welcome"
              component={Welcome}
            />
            <Stack.Screen
              name="Signin"
              component={SigninPage}
            />

            <Stack.Screen
              name="FindInfo"
              component={FindInfoPage}
            />
            <Stack.Screen
              name="Notice"
              component={Notice}
            />
            <Stack.Screen
              name="NoticeDetails"
              component={NoticeDetail}
            />
            <Stack.Screen
              name="Inquiry"
              component={Inquiry}
            />
            <Stack.Screen
              name="InquiryDetails"
              component={InquiryDetail}
            />

            <Stack.Screen
              name="AboutUs"
              component={AboutUs}
            />
       
            <Stack.Screen
              name="MyPageCertification"
              component={MyPageCertification}
            />
            <Stack.Screen
              name="MyPageChangePW"
              component={MyPageChangePW}
            />
          </Stack.Navigator>
        </NavigationContainer>
        <Toast config={toastConfig} />
      </View>
    </RecoilRoot>
  );

3. 인증 정보가 필요할 때

  const handleOpenURL = (event) => {
  console.log('handleOpenURL',event.url);
  return event.url
}

useEffect(() => {
  getToken().then((token) => {
    if(!token) {
      setIsLoggedIn(false);
    }else{
      setIsLoggedIn(true);
    }
  })
  Linking.addEventListener('url',handleOpenURL);
}, [])

4. linking 작성 / deeplink 연결

const prefix = Linking.createURL('/');

const linking = {
    prefixes: [
      'https://tongdoc-good.page.link',
      prefix,
      "kr.co.tongdoc://",
      ],
    config: {
      screens: {
        initialRouteName:'Main',
        Home:{
          screens:{
            Main:'home',
            Diagnosis: 'diagnosis',
            PurchaseMobile:'purchasemobile',
            CustomService:'customservice',
            Mypage:'mypage'
          }
        },
        Inquiry:'inquiry',
        Notice:'notice',
        NoticeDetail:{
          path:'noticedetail',
        },
        AboutUs:'aboutus',
        MyPageChangePW:'changepassword',
        FindInfo:'findinfo',
        MyPageCertification:'mypagecertification',
        OnBoarding:'onboarding',
      }
    },
    
    async getInitialURL() {
      let url = await Linking.getInitialURL();
      if(url != null) {
        return url;
      }
      const response = await Notification.getLastNotificationResponseAsync();
       url = response?.notification.request.content.data.url;
      return url;
    },

    subscribe(listener){
      const onReceiveURL = ({url}) => listener(url);
      Linking.addEventListener('url',onReceiveURL);
      const subscription = Notification.addNotificationResponseReceivedListener(response => {
        const url = response?.notification.request.content.data.url;
        // const notificationType = response.notification.request.content.data.messageType;
        // if(notificationType === 'inboundEmail'){
        //   listener(prefix + 'home');
        //   listener(url);                
        // }
        // if(notificationType === 'sendInquiry'){
        //   listener(prefix + 'home');
        //   listener(url);
        // }
        
        listener(prefix + 'home');
        listener(url);
      })
      return () => {
        // 
        subscription.remove()
      }
    }
  }