Как создавать динамические вкладки в React Navigation v3 - PullRequest
Новая
       15

Как создавать динамические вкладки в React Navigation v3

0 голосов
/ 23 января 2019

У меня есть стековый навигатор, обернутый контейнером приложения: 

const AppNavigator = createStackNavigator({
  Home: {
    screen: Home,
  },
});

export default createAppContainer(AppNavigator);

В доме должны быть динамические вкладки.Я хочу загрузить некоторую информацию из серверной части и затем создать вкладки.

А вот мой Home компонент: 

class Home extends Component {
  get tabs() {
    return {
      Main: { screen: Demo },
      World: { screen: Demo },
    };
  }

  get tabOptions() {
    return {
      // options...
    };
  }

  render() {
    const Tabs = createMaterialTopTabNavigator(this.tabs, this.tabOptions);
    return <Tabs />;
  }
}

В этом случае я получаю эту ошибку:

error 1

Но если я завершаюсь с createAppContainer ... 

const Tabs = createAppContainer(createMaterialTopTabNavigator(this.tabs, this.tabOptions));

... тогда я получаю предупреждение о большемчем один контейнер в приложении.

warning

Так как правильно создавать динамические вкладки?

UPD 1. Реальный код получения вкладок, который я сейчас использую с желтым предупреждением. 

get tabs() {
  const { categories } = this.props;
  return reduce((acc, item) => assoc(prop('name', item), Demo, acc), {})(categories); // ramda
}

1 Ответ

0 голосов
/ 23 января 2019

Эта ошибка появляется, потому что обертывание навигатора как компонента является антипаттерном, так как навигационная опора нарушается таким образом.

Вместо этого, не используйте класс, используйте простые функции, или вы будете боротьсятак же, как другие парни, которые пытались использовать компонент 

function tabs(){
   return {
      Main: { screen: Demo },
      World: { screen: Demo },
    }
  }

  function tabOptions(){
    return {
      // options...
    };
  }

  export default createMaterialTopTabNavigator(tabs(), tabOptions())
...