소개

다시 React Navigation v5 기사입니다.
이번에는 Deep linking을 구현합니다.

아래 준비

iOS용 설정을 합니다.
URL Types 를 설정합니다.



그런 다음 AppDelegate.m 를 수정합니다.



코드는 여기입니다.

#import "AppDelegate.h" // 元からある
#import <React/RCTLinkingManager.h>

...

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
 restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
 return [RCTLinkingManager application:application
                  continueUserActivity:userActivity
                    restorationHandler:restorationHandler];
}

이것만으로 Safari 등으로 <URL Schemas>://xxxx 와 같이 입력하면 앱을 열 수 있습니다.


이제 앱에 액세스할 수 있습니다.
각 페이지로의 전환은 React Navigation과 함께 사용하면 유용합니다.
이하에서는 그 방법을 구현해 갑니다.

React Navigation v5에서 Deep linking

공식 문서 을 참고로 useLinking 를 사용합니다.

const App: React.FunctionComponent = () => {
  const ref = useRef();
  const { getInitialState } = useLinking(ref, {
    prefixes: ['srn5://'],
    config: {
      Details: 'details',
    },
  });
  const [isReady, setIsReady] = useState(false);
  const [initialState, setInitialState] = useState();

  useEffect(() => {
    Promise.race([
      getInitialState(),
      new Promise((resolve) => setTimeout(resolve, 150)),
    ])
      .catch((e) => {
        console.error(e);
      })
      .then((state) => {
        if (state !== undefined) {
          setInitialState(state);
        }

        setIsReady(true);
      });
  }, [getInitialState]);

  if (!isReady) {
    return null;
  }

  return (
    <AuthProvider>
      <NavigationContainer initialState={initialState} ref={ref}>
        <HomeNavigator />
      </NavigationContainer>
    </AuthProvider>
  );
}

ref 를 정의하고 NavigationContainer 와 useLinking 에 전달합니다.useLinking 의 config 에서 경로와 화면을 연결합니다.
HomeNavigator는 다음과 같은 형태로 정의됩니다.

import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';

const Stack = createStackNavigator();
const HomeNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Details" component={Details} />
  </Stack.Navigator>
)

일반 액세스는 Home를 표시하지만 srn5://details에 액세스하면 Details가 직접 열립니다.

결론

이번에는 Deep linking 구현에 대해 소개했습니다.

실제로 이용하는 경우, 범용 링크( https://~~~ )의 형태로 이용하는 것이 현실적이라고 생각합니다만, 우선은 이 방법으로 간이적인 앱에의 링크를 설정할 수 있습니다.

참고

htps : // 레아 ct나치ゔぇ. v / cs / 펑킨 g # 헛 d g
h tps : // 레아 ct ゔ ぃ가 치온. 오 rg / 두 cs / 데에 p 펑킨 g /