React Native通过tab .screen传递参数

Question

在React native中单击选项卡时，我如何将参数或对象传递给选项卡屏幕?这是一个底部标签导航在应用程序的一个页面的代码。

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;

我已经尝试了几种方法，但都不能让它工作。有没有人有一个工作的例子或甘蔗有人帮助我与我的代码??

谢谢

Answer 1

您可以为Tab.Screen组件使用initialParams道具，以便将初始参数传递给每个选项卡。

下面是一个关于如何在第一个选项卡屏幕上这样做的示例。

<Tab.Screen name={projectsName} component={ProjectsScreen} initialParams={{ data }} />