Как установить параметры по умолчанию в маршрутизаторе Custom Tab Navigator - PullRequest
1 голос
/ 02 мая 2019

Я создаю пользовательскую навигацию по боковой панели в реагирующем. Я использовал пример 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?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...