ReactNativeのMaterial Top Tabs Navigator(https://reactnavigation.org/docs/material-top-tab-navigator/)
を使う際に、Tab.Screenのcomponentにpropsを渡したいという状況に陥りました。
通常の書き方だと、
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
となってしまって、それぞれのcomponentにpropsを渡せません。
###対処法
公式のScreenの箇所にコンポーネントのpropsを渡す代わりにReact Elementをcallbackで返してくれるという記述が...!
https://reactnavigation.org/docs/screen#children
これをTab.Screen
に応用します。
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home">
{(props)=> <HomeScreen {...props}/>}
</Tab.Screen>
<Tab.Screen name="Setting">
{(props)=> <SettingScreen {...props}/>}
</Tab.Screen>
</Tab.Navigator>
);
}
解決しました!子要素はJSXで返さないといけないので{()=> ...}
の形にすることに注意です。