MaterialTopTabNavigator динамические настройки маршрута - PullRequest
Новая
       32

MaterialTopTabNavigator динамические настройки маршрута

0 голосов
/ 19 марта 2019

Я хочу создать через createBottomTabNavigator .Имеет 5 вкладок.Каждая вкладка представляет собой StackNavigator .

Одна из этих вкладок имеет верхнюю панель вкладок.Я создаю верхнюю панель вкладок с помощью createMaterialTopTabNavigator

Но я знаю количество вкладок после запроса http.Как я могу добавить вкладку динамически?В документе сказано, что

Существуют обходные пути, если вам абсолютно необходимы динамические маршруты, но вы можете ожидать некоторой дополнительной сложности

Я запутался в этой задаче.

Как мне это сделать?

Связанная с реакцией навигационная проблема: https://react -navigation.canny.io / feature-запросы / p / dynamic-route-for-navigators

1 Ответ

1 голос
/ 19 марта 2019

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

import React, {Component} from 'react-native'
import {createMaterialTopTabNavigator, createAppContainer} from 'react-navigation'

class DynamicTabs extends Component{
    render(){
        //I am using a prop here to update the Tabs but you can use state to update 
        //when the network request has succeeded or failed
        const {shouldRenderTab} = this.props

        const TabNavigator = createMaterialTopTabNavigator({
            Tab1: Tab1Component,
            Tab2: Tab2Component,
            //Create a tab here that will display conditionally
            ...(shouldRenderTab ? {Tab3: Tab3Component} : {})
        })

        const ContainedTabNavigator = createAppContainer(TabNavigator)

        return <ContainedTabNavigator/>

    }
}

export default DynamicTabs

Это текущее решение, которое я использую, адаптированное из оригинального решения. размещено на github

.
...