<div id="readability-page-1" class="page"><div><pre><code>// App.js
import React, { useEffect, useState } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { Provider as PaperProvider } from "react-native-paper";
import Root from "./Root";
import dynamicLinks from "@react-native-firebase/dynamic-links";
import { Provider } from "react-redux";
export default function App() {
 const [initailScreen, setInitialScreen] = useState(undefined);
 const handleDynamicLink = (link) =&gt; {
 setInitialScreen("ContentViewer");
 };

 useEffect(() =&gt; {
 // foreground deeplink
 const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
 // backgournd deeplink
 dynamicLinks()
 .getInitialLink()
 .then((link) =&gt; {
 setInitialScreen("ContentViewer");
 });
 return () =&gt; unsubscribe();
 }, []);

 return (
 &lt;Provider &gt;
 &lt;PaperProvider&gt;
 &lt;NavigationContainer &gt;
 &lt;Root initailScreen={initailScreen} /&gt;
 &lt;/NavigationContainer&gt;
 &lt;/PaperProvider&gt;
 &lt;/Provider&gt;
 );
}
</code></pre>
<pre><code>// Root.js
function Root({ initailScreen }) {
 const [firstRoute, setFirstRoute] = useState("");
 useEffect(() =&gt; {
 setFirstRoute(initailScreen);
 }, [initailScreen]);
 return (
 &lt;Stack.Navigator headerMode="screen"&gt;
 {firstRoute === undefined ? (
 &lt;Stack.Screen
 name="Splash"
 component={SplashScreen}
 options={{
 title: "",
 headerShown: false,
 }}
 /&gt;
 ) : (
 &lt;&gt;&lt;/&gt;
 )}
 
 &lt;/Stack.Navigator&gt;
 );
}

export default Root;
</code></pre>
다이내믹 링크 사용시 이벤트 리스너에 따라 스플래시 화면을 실행시키지 않아야 되는 상황. 
app.js에서 props로 상태값을 전달 후 root.js에서 상태값을 바로 사용하면 app.js의 useState의 초기값을 
반드시 실행할 수 밖에 없으므로 root.js의 useEffect에서 필터링을 거친 후 상태값 변경을 통해 조건부 렌더링을 실행하도록 하였다.</div></div>

jeong3320.log

// App.js
import React, { useEffect, useState } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { Provider as PaperProvider } from "react-native-paper";
import Root from "./Root";
import dynamicLinks from "@react-native-firebase/dynamic-links";
import { Provider } from "react-redux";
export default function App() {
 const [initailScreen, setInitialScreen] = useState(undefined);
 const handleDynamicLink = (link) => {
 setInitialScreen("ContentViewer");
 };
 useEffect(() => {
 // foreground deeplink
 const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
 // backgournd deeplink
 dynamicLinks()
 .getInitialLink()
 .then((link) => {
 setInitialScreen("ContentViewer");
 });
 return () => unsubscribe();
 }, []);
 return (
 <Provider >
 <PaperProvider>
 <NavigationContainer >
 <Root initailScreen={initailScreen} />
 </NavigationContainer>
 </PaperProvider>
 </Provider>
 );
}
// Root.js
function Root({ initailScreen }) {
 const [firstRoute, setFirstRoute] = useState("");
 useEffect(() => {
 setFirstRoute(initailScreen);
 }, [initailScreen]);
 return (
 <Stack.Navigator headerMode="screen">
 {firstRoute === undefined ? (
 <Stack.Screen
 name="Splash"
 component={SplashScreen}
 options={{
 title: "",
 headerShown: false,
 }}
 />
 ) : (
 <></>
 )}
 </Stack.Navigator>
 );
}
export default Root;
다이내믹 링크 사용시 이벤트 리스너에 따라 스플래시 화면을 실행시키지 않아야 되는 상황.
app.js에서 props로 상태값을 전달 후 root.js에서 상태값을 바로 사용하면 app.js의 useState의 초기값을
반드시 실행할 수 밖에 없으므로 root.js의 useEffect에서 필터링을 거친 후 상태값 변경을 통해 조건부 렌더링을 실행하도록 하였다.

[RN] 다이내믹 링크시 스플래시 화면 조절하기

댓글