我正在使用react-native创建自定义边栏导航。我使用了来自react-navigation存储库的CustomTabs示例,该示例运行良好。如文档所述(https://reactnavigation.org/docs/en/stack-navigator.html#params),我应该能够设置默认参数来标记我的每条路线的按钮,但控制台始终显示未定义。我在哪里错了?
我可以通过navigating.navigate()来设置参数,但是当我实际创建路线时它不起作用
import * as React from "react";
import {
createNavigator,
createNavigationContainer,
TabRouter
} from 'react-navigation';
import { View, Button, Text} from "react-native";
const MyNavScreen = ({ banner }) => (
<View style={{padding: 15}}>
<Text>Banner: {banner}</Text>
</View>
);
const CustomTabBar = ({ navigation }) => {
const { routes } = navigation.state;
return (
<View style={{borderRightWidth: 1, borderRightColor: "darkgrey"}}>
{routes.map(route => (
// No default params in my route???
<Button
onPress={() => navigation.navigate(route.routeName)}
title={`${route.params.label} (${route.params.badgeCount})`}
key={route.routeName}
>
</Button>
))}
</View>
);
};
class CustomTabView extends React.Component<any> {
render() {
const { navigation, descriptors } = this.props;
const { routes, index } = navigation.state;
const descriptor = descriptors[routes[index].key];
const ActiveScreen = descriptor.getComponent();
return (
<View style={{flex: 1, flexDirection: "row"}}>
<CustomTabBar navigation={navigation} />
<ActiveScreen navigation={descriptor.navigation} />
</View>
);
}
}
// Creating my router with needed params like label, badgecounts and so on...
const CustomTabRouter = TabRouter(
{
Home: {
screen: ({navigation}) => <MyNavScreen banner="Home Screen" navigation={navigation} />,
param: {
label: "XBox",
type: "bold",
badgeCount: 12
}
},
Notifications: {
screen: ({navigation}) => <MyNavScreen banner="Notification Screen" navigation={navigation} />,
param: {
label: "Playstation",
type: "default",
badgeCount: 2
}
},
Settings: {
screen: ({navigation}) => <MyNavScreen banner="Settings Screen" navigation={navigation} />,
param: {
label: "Nintendo",
type: "default",
badgeCount: 0
}
},
},
{}
);
const MyApp = createNavigationContainer(
createNavigator(CustomTabView, CustomTabRouter, {})
);
如何访问CustomTabBar组件中的参数?