如何在Custom Tab Navigator路由器中设置默认参数

时间:2019-05-02 09:26:46

标签: typescript react-native react-navigation

我正在使用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组件中的参数?

0 个答案:

没有答案