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

90
10

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

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

export default createAppContainer(AppNavigator);

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

А вот мой домашний компонент:

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
}

спросил(а) 2021-01-19T15:44:40+03:00 6 месяцев назад
1
Решение
127

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

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

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

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

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

ответил(а) 2021-01-19T15:44:40+03:00 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема