Я использую 2 createMaterialTopTabNavigator в собственном мобильном приложении реагирования
Таким образом, верхний (родительский) top-tab-navigator предназначен для всех стран (список стран заполняется из базы данных через вызов API) и нижняя (дочерняя) верхняя вкладка-навигатор предназначена для фиксированного числа статистических данных c вкладок, скажем, 3, например, Население, Погода и загрязнение.
Global | Индия | США | Китай <------- Навигатор вкладок «Родительский тоб» (Dynami c) </h2> Население | Погода | Загрязнение <------- Навигатор вкладок дочерних тобов (Stati c) </h2> Обе вышеуказанные вкладки находятся в верхней части экрана! Поскольку страны должны быть Заполняется динамически. Я использовал итератор для отображения нужного количества вкладок. Проблема здесь заключается в том, чтобы заставить экран дочерней вкладки знать имя родительской вкладки. Например: - если я sh сделаю вызов API для Weather в Индии, мне понадобится имя родительской вкладки, к которой я сейчас перехожу. Вот код для родительской вкладки (Родительская вкладка является компонентом класса): const Tab = createMaterialTopTabNavigator();
class Example extends Component {
constructor(props) {
super(props);
this.state = {
countries: ['Global', 'India', 'US', 'China'],
};
}
renderChildTab = () => {
return NestedTab();
}
render() {
return (
<NavigationContainer>
<Tab.Navigator>
{
this.state.countries.map((val) => {
return (
<Tab.Screen name={val} component={this.renderChildTab} />
);
})
}
</Tab.Navigator>
</NavigationContainer>
);
}
}
Вот код дочерних вкладок (функциональных компонентов): const InnerTab = createMaterialTopTabNavigator();
function NestedTab() {
return (
<InnerTab.Navigator>
<InnerTab.Screen name="Population" component={Population} />
<InnerTab.Screen name="Weather" component={Weather} />
<InnerTab.Screen name="Pollution" component={Pollution} />
</InnerTab.Navigator>
);
}
Часть пользовательского интерфейса работает как нужно Как заставить дочерний компонент вкладки получить имя / значение родительской вкладки, к которой он в данный момент перемещен (т. е. выделенная вкладка страны) Попытался использовать setState () внутри итератора карты, но response-native не позволяет этого. Кроме того, член класса не помогает передавать его в качестве параметра, поскольку итератор по какой-то причине анализирует только последнее значение как параметр, но неожиданно корректно загружает все имена вкладок. Любое решение, использующее реквизиты, также приветствуется. Do c ссылка на используемую библиотеку: https://reactnavigation.org/docs/material-top-tab-navigator/