[英]React Native pass params through tabs.screen
how can I pass params or an object to a Tabs-Screen when clicking on that tab in React Nativ?在 React Nativ 中单击该选项卡时,如何将参数或对象传递给选项卡屏幕? This is the code of a bottom Tab Navigation on one page of the app.
这是应用程序一页上底部标签导航的代码。
const Tab = createBottomTabNavigator();
function MainContainer({ route, navigation }) {
//function MainContainer({ }) {
// Load the icon font before using it
const [fontsLoaded] = useFonts({ IcoMoon: require('../../assets/icomoon/zepra_icons.ttf') });
const { data } = route.params;
console.log('data:');
console.log(data);
if (!fontsLoaded) {
return <AppLoading />;
}
return (
<Tab.Navigator
initialRouteName={projectsName}
screenOptions={({ route }) => ({
headerShown: false,
tabBarIcon: ({ focused, color, size }) => {
let iconName;
let rn = route.name;
if (rn === projectsName) {
iconName = focused ? 'PROJEKTE_ALLE' : 'PROJEKTE_ALLE';
} else if (rn === waermeschutzName) {
iconName = focused ? 'HAUS_3' : 'HAUS_3';
} else if (rn === begehungenName) {
iconName = focused ? 'NOTIZ_ERSTELLEN' : 'NOTIZ_ERSTELLEN';
}
return <Icon name={iconName} size={43} color={color} />;
},
'tabBarActiveTintColor': '#4283b1',
'tabBarInactiveTintColor': '#5db8bd',
'tabBarStyle':{ 'paddingTop':4, 'height':90 },
'tabBarLabelStyle':{ 'paddingTop':3, 'fontSize':13 }
})}>
<Tab.Screen name={projectsName} component={ProjectsScreen} />
<Tab.Screen name={waermeschutzName} component={WaermeschutzScreen} />
<Tab.Screen name={begehungenName} component={BegehungenScreen} />
</Tab.Navigator>
);
}
export default MainContainer;
I have tryed several ways but could not get it to work.我尝试了几种方法,但无法使其正常工作。 Does anyone have a working example or cane someone help me with my code??
有没有人有一个可行的例子或有人帮我写代码?
Thank you谢谢
You could use the initialParams prop for the Tab.Screen
components in order to pass the initial params to each tab.您可以为
Tab.Screen
组件使用initialParams属性,以便将初始参数传递给每个选项卡。
Here is an example on how to do this for your first tab screen.这是有关如何为您的第一个选项卡屏幕执行此操作的示例。
<Tab.Screen name={projectsName} component={ProjectsScreen} initialParams={{ data }} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.