Navigationで遷移先にparamsが渡せない。undefinedになってしまう時の対処法【解決法】
abyblog
expoでReactNavigaionを使用して、画面遷移を行うときに、なぜか値を渡す事ができない状況になることがあります。
公式の書き方通りにやってるのに、
なんで？？となっていた時に解決することができた方法を共有します。
chatGPTに聞いても出てきていない方法なので、ぜひ参考にしてください！（執筆時点）
目次（クリックで読みたい部分にジャンプできます）
なぜ、遷移先画面に値を渡せないか
遷移先の画面に値を渡せない原因は、画面がネストされている状態にあるためです。
つまり画面が入れ子状態になっているため、あなたが渡したいと思っている画面を指定できていないことにあります。
入れ子になっているかは、App.jsを見ればわかります。
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="FirstFrame">
<Stack.Screen
name="FirstFrame"
component={FirstFrame}
/>
<Stack.Screen
name="Matching_Frame"
component={Matching_Frame}
/>
<Stack.Screen
name="Root"
component={HomeTabs}
// options={{ headerShown: false }}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
function HomeTabs() {
const Tab = createBottomTabNavigator();
return (
<Tab.Navigator
initialRouteName="HOME"
>
<Tab.Screen
name="マッチング"
component={ModalFrame}
/>
<Tab.Screen
name="HOME"
component={HOME}
/>
<Tab.Screen
name="お気に入り"
component={FavoriteFrame}
/>
</Tab.Navigator>
);
}
export default App;このコード上では、name="Root" スクリーンの中に、Tabが使われた画面が入っています。
今回の値が渡せないという事象は、Stack.Screen上の画面から、入れ子構造になっている（今回だとTab.Screen内の画面）に値を渡そうとすると、渡せなくなる事象が発生します。
通常の渡し方とは少し違った渡し方になりますので、それを以下で解説します。
通常の値の渡し方
通常ReactNavigationで遷移先の画面に値を渡すには、次のように書きます。
const data = data //渡したい値
navigation.navigate('Profile', { data: data })ただ、画面が入れ子構造になっている場合は、このように渡しても受け取る側では、「undefined」になってしまい渡せません。
【解決法】ネストされた画面に値を渡せるようにするコード例
では、入れ子構造になっている画面に値を渡すためのコードです。
先ほどのコードを例に取って、
name="Matching_Frame" という画面から、Tab.Screenの name="HOME" に遷移し値を渡そうと思います。
const data = data //渡したい値
navigation.navigate('Root', {
screen:"HOME",
params :{data: data},
});navigation.navigate(親の画面名, {
screen : 入れ子構造内の画面名,
params : { 渡したい値 },
});
今回の例では、渡したい画面の親の画面名は、Rootになります。
渡したい画面名は、HOMEになるので、screenに渡してあげます。
このようにすることで、遷移先に渡す事ができるようになります。
遷移先画面で受け取る方法は、以下公式ページを参考にしてください。
Passing parameters to routes | React Navigation
まとめ
今回は、入れ子構造になっている画面に対し、値を渡す方法について解説しました。
expoでの開発を一緒に頑張っていきましょう！！では、また！
