React Navigation Drawer: динамически маршруты и элементы навигации

Question

Прямо сейчас я сталкиваюсь с проблемой. Прежде чем мое приложение монтируется, я выбираю категории из API.Теперь я хочу иметь динамическое приложение, которое всегда содержит самые новые данные.

Я хочу, чтобы разные категории всегда были в виде отдельного экрана.Функции, которые мне нужны для экрана каждой категории, всегда одинаковы.Итак, я сам создал шаблон экрана.

Однако мне нужно извлечь различные категории из API, а затем импортировать экран моего шаблона столько раз, сколько я выбрал категорий, чтобы создать экран для каждой категории.Кроме того, мне нужно передать категорию на экран шаблона, чтобы настроить правильный экран для каждой категории.

Возможно ли это, и можете ли вы дать мне подсказку, как это сделать?

С уважением и спасибо!

Answer 1

Я понимаю, что вы хотите, чтобы навигация в вашем ящике была динамичной по отношению к данным, полученным из API.В этом случае вы должны создавать и отображать навигацию по выдвижным ящикам только после вызова API .

После получения категорий выполните итерации по ним и создайте конфигурацию маршрута.Вы должны иметь возможность переопределить navigationOptions и вручную установить некоторые параметры (содержащие вашу конкретную категорию) для каждого экрана.

let routeConfig = {};

categories.map(category => {
    routeConfig[category.key] = {
        screen: CategoryScreen, // your template screen, common to every item
        navigationOptions: (props) => {
            props.navigation.setParams({ category });
        }
    }
});

const DrawerNav = createDrawerNavigation(routeConfig, { /*options*/ });

Тогда вам придется визуализировать компонент навигации по ящикам вручную

render() {
    return (
        <DrawerNav screenProps={{}} />
    );
}

Наконец, в CategoryScreen или в любом другом компоненте экрана вы можете получить доступ к категории аналогично классическому варианту навигации: this.props.navigation.state.params.category.

Некоторые примечания:

• Константа DrawerNav является лишь примером.Скорее всего, вы захотите сделать его свойством класса или обычной переменной, определенной вне класса, но заполненной внутри.
• category.key - это еще один пример, вы должны обязательно заменить его начто-то уникальное для каждой категории, например, строковое представление идентификатора категории.
• Если вы хотите иметь разных компонентов экрана для каждой категории, вы можете просто передать другой компонент в screen на основе категории в текущей итерации .map().