Question

我在React Native Mobile App中使用了2个createMaterialTopTabNavigator

因此，顶部（父）顶部标签导航器适用于所有国家（国家列表通过API调用从数据库中填充），底部（子）顶部标签导航器适用于固定数量的统计信息标签说3，例如人口，天气和污染。

全球|印度|美国|中国<------父母Tob标签导航器（动态）

人口|天气|污染<-------儿童Tob标签导航器（静态）

以上两个选项卡都在屏幕顶部！

由于要动态填充国家/地区，因此我使用了迭代器来呈现所需数量的标签。这里的问题在于使子选项卡的屏幕知道父选项卡的名称。例如：-如果我希望对印度的Weather进行API调用，则需要在该时间点将我导航到的父选项卡的名称。

这是父选项卡的代码（“父选项卡”是一个类组件）：

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>
    );
}

UI部分按预期工作

如何使子选项卡组件获取当前导航到的父选项卡的名称/值（即突出显示的国家/地区标签）

尝试在地图迭代器中使用setState（），但是react-native不允许这样做。同样，类成员也无法帮助将其作为参数传递，因为出于某种原因，迭代器仅将最后一个值解析为param，但是出人意料的是正确地加载了所有选项卡名称。

也欢迎使用道具的任何解决方案。

指向所用库的文档链接：https://reactnavigation.org/docs/material-top-tab-navigator/

React Native-嵌套选项卡导航-如何将父选项卡的名称传递给子选项卡

全球|印度|美国|中国<------父母Tob标签导航器（动态）

人口|天气|污染<-------儿童Tob标签导航器（静态）

0 个答案: